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の例

推薦する

MySQL 5.7 生成列の使用例の分析

この記事では、例を使用して、MySQL 5.7 で生成された列の使用方法を説明します。ご参考までに、...

Vue で HTML 5 ドラッグ アンド ドロップ API を使用する方法

ドラッグ アンド ドロップ API は、ドラッグ可能な要素を HTML に追加し、ドラッグ可能な豊富...

IEの送信フォームの記録履歴クリックリターン情報を実現するためのCSSスタイルコントロールはまだ残っています

これは主に CSS スタイルのコントロールと META タグです。コードをコピーコードは次のとおりで...

Vue開発の一般的な手法の詳細な説明

目次$nextTick() $forceUpdate() $セット() .sync——2.3.0 以...

Docker+keepalived+nginx を使用してマスタースレーブホットスタンバイを実装する方法の例

序文単一障害点を解決するには、マスター/スレーブ ホット スタンバイ ソリューションを構成する必要が...

Linux でファイルの作成時間を取得する方法と実践的なチュートリアル

背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...

CocosCreatorでJSZip圧縮を使用する方法

CocosCreator バージョン: 2.4.2 jszipの実践的なプロジェクトアプリケーション...

Vue における ref と $refs の紹介と使用例

序文JavaScript では、document.querySelector("#demo...

MySQL の sql_mode モード例の詳細な説明

この記事では、MySQL の sql_mode モードについて例を挙げて説明します。ご参考までに、詳...

Excel をインポートするときに js で時間を変換する正しい方法について

目次1. 基本2. 問題の説明3. 解決策付録: js を使用して Excel の日付形式を変換する...

MySQL Community Server 5.7.19 インストール ガイド (詳細)

MySQL公式サイトのzipファイルのダウンロードリンク https://dev.mysql.co...

Vue を通じて QR コードスキャン機能を実装する

ヒントこのプラグインは https プロトコルでのみアクセスできます。http プロトコルはうまく機...

CSS3 における擬似クラスの一般的な使用法の詳細な説明

before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した...

MySQLの再帰問題

MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...

マージンの重複問題を解決する方法

1. まず、2つ以上の隣接する通常フローブロック要素の垂直マージンの崩壊を引き起こす原因を知る必要が...