JavaScript関数の詳細な紹介

JavaScript関数の詳細な紹介

任意の数のステートメントを関数を通じてカプセル化することができ、いつでもどこでも呼び出して実行できます。

当社のJavaScriptスクリプト言語は非常に特殊です。C 言語と比較すると、そのパラメータにはデータ型のサポートは必要ありません。 return値については詳しく説明しません。C言語と同じです。書かない場合は自動的にundefined

関数fun(x,y){
            
        }
//関数を宣言するにはこれを記述します

私の理解する限りでは、彼はオブジェクトの形式でパラメータを渡し、オブジェクトのさまざまな属性値(参照型の値)を実際のパラメータとして使用しています。

たとえば、次のようなアプローチがあります。

関数fun(x, y) {
          // alert("x の値は " + x.value です);
            alert("x の値は " + x です);
        }

これを実行すると、ポップアップ ボックスにエラーが表示されます: x の値は[object HTMLInputElement],オブジェクトとして渡されるため、論理設計に準拠していません。次のように実行する必要があります。

x のvalueを返します。

関数fun(x, y) {
            alert("x の値は " + x.value です);
          // alert("x の値は " + x です);
        }

  • したがって、単純な 2 つの整数を乗算して値を返すように設計します。
  • ここで、このタグに入力htmlコードを記述するには、 <form></form>を使用する必要があることを覚えておく必要があります。そうしないと、エラーを探すのに多くの時間を費やすことになります (なぜ私がそれを知っているのかは聞かないでください。ただ涙が出るだけです)。

私たちには深い理解があります。心配しないでください。このコードを見てみましょう。

ここで何か違うのでしょうか? この関数の以前の記述方法によれば、ランダムに記述する必要があるのでしょうか?でも、ここではうまくいってるから面白い(楽しそうに笑う)

つまり、 ECMAScript関数は、渡されるパラメータの数を気にせず、また、渡されるパラメータが何であるかを気にせず、パーサーがエラーを報告しないことになります。 (素晴らしいですね! 先生は、私がパラメータの渡し方を知らないことを心配する必要がなくなりました。) では、彼はこの「世紀の問題」をどのように解決したのでしょうか? 実際、各関数本体には、このパラメータ配列にアクセスして、配列に渡された各パラメータを取得するためのargumentsオブ​​ジェクトがあります。

道教の仲間の皆さん、次のコードfun function fun ("Brave", "Niu Niu") に二重引用符を使ってみてください。何が起こるでしょうか? 説明によると、上の引用符は最も近い引用符とペアになっています。うわー、うわー、うわー

ねえ、これは私たちが学んだjava関数のオーバーロードに少し似ていませんか? 実際、 JavaScriptはオーバーロードはありません。

さらに2つの例を見てみましょう。

関数fun() {
    (引数の長さ == 1)の場合{
        アラート(引数[0] + 10);

    }
    (引数の長さ == 2)の場合{
        アラート(引数[0] + 引数[1]);
    }
}
楽しい(10);//20
楽しい(10,20);//30

パラメータの数を渡すことで適切な機能を実現できるだけで、本当のオーバーロードは実現できません。この機能は完全なオーバーロードではありませんが、 JavaScriptのこの残念さを補うには十分です。 argumentsパラメータと一緒に使用することもできます。

次のように:

関数fun(num1, num2) {
    (引数の長さ == 1)の場合{
        アラート(数値1 + 10);

    }
    (引数の長さ == 2)の場合{
        アラート(引数[0] + 数値2);
    }

}
楽しい(10);//20
楽しい(10, 20);//30

その後、誰かが尋ねました、パラメータはとにかくargumentsオブジェクトに割り当てられているので、 arguments[i]の値を直接変更することは可能ですか?

  • 興味深いのは、 argumentsの動作に関して、その値は常に対応する名前付きパラメータ値と同期され、現在の関数の値が変更されることです。 ! !つまり、パラメータとarguments[i]メモリ空間は独立していますが、値は同期されています。
関数fun(num1, num2) {
    引数[1] = 10;
    アラート(引数[0] + 数値2);
}

</スクリプト>
<フォーム>
 <br><input type="button" onclick="fun(10,20)" value="click">
</フォーム>

ポップアップ ボックスの値は 20 です。これはarguments[i]の値を変更すると、このパラメーターが自動的に反映されることを示しています。このパラメーターが存在しない場合、このパラメーター値を書き換えると構文エラーが発生します。コードは実行されません。同一の関数名が 2 つある場合でもエラーは発生しませんが、その名前は後で定義される関数にのみ属します。

要約:

  • JavaScript関数は他の言語の関数とは微妙に異なります。
  • いつでも任意の値を返すことができるため、値を返す必要はありません。
  • arguments.lengthは、関数の定義時に関数に与えられた名前の数ではなく、渡された引数の数によって決まります。
  • オーバーロードはありません。つまり、パラメータは 0 個以上の配列の形式で参加でき、これらのパラメータにはargumentsオブジェクトを通じてアクセスされます。

JavaScript functionの詳しい紹介はこれで終わりです。JavaScript 関数に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • javascript関数(関数型)の使い方と注意点のまとめ
  • JavaScript 関数型プログラミング (Functional Programming) 合成関数 (Composition) の使用法の分析
  • JavaScript 関数型プログラミングにおける矢印関数の使用法の分析
  • JavaScript 関数型プログラミングにおける高階関数の使用法の分析
  • JavaScript 関数型プログラミングにおける純粋関数の使用法の分析
  • JavaScript 関数型プログラミング: 宣言型と命令型の例の分析
  • 動的コードをインターセプトするために、eval、Function、その他のシステム関数をJSに挿入します。
  • Vue.js における関数コンポーネントの使用について説明します

<<:  12個のJavascriptテーブルコントロール(DataGrid)が整理されています

>>:  フォームアクションとonSubmitの例

推薦する

Webページ作成の質問: 画像ファイルのパス

この記事は 123WORDPRESS.COM Lightning によるオリジナルです。転載する際に...

mysql zipファイルのインストールチュートリアル

この記事では、参考までにMySQL zipファイルをインストールする具体的な方法を紹介します。具体的...

MySQL 空間データストレージと関数

目次1. データ型1. MySQL空間データとは何か2. GeoJSONとは3. 空間データ型のフォ...

HTMLのタグと要素の違いの詳細な説明

ウェブページに慣れていない友人の多くは私と同じように、HTML で要素、タグ、属性がどのように定義さ...

Vue実戦記録のログインページの実装

目次1. 事前準備1.1 Node.jsをインストールする1.2 webpackをインストールする1...

CSS で垂直方向の中央揃えを実装するいくつかの方法の概要

フロントエンドのレイアウト プロセスでは、水平方向の中央揃えを実現するのは比較的簡単で、通常は ma...

MySql 5.7.20 のインストールとデータおよび my.ini ファイルの構成

1. まずMySqlの公式サイトからダウンロードします参考: https://www.jb51.ne...

Vue3 のレンダリング関数における互換性のない変更の詳細な説明

目次レンダリングAPIの変更レンダリング関数のパラメータレンダリング関数のシグネチャの変更VNode...

Alibaba Cloud ホストが IP を使用して Web サイトにアクセスできない問題の解決策 (セキュリティ グループ ルールを構成することで解決)

Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...

vue backtop コンポーネントを実装するための完全なコード

効果: コード: <テンプレート> <div class="back-t...

MySQL実行計画を学ぶ

目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...

Tomcat10 Catalinaのログの文字化けの問題を解決する

実行環境、Idea2020バージョン、Tomcat10、実行時にTomcat CatalinaLog...

ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要

新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...

Linux で Oracle データベースをバックアップするためのスケジュールされたタスクの設定に関するチュートリアル

1. データベースの文字セットを確認するデータベースの文字セットは、Linux で設定された環境変数...

js でシンプルなタブを実装する

タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...