jQueryで関数を宣言する5つの異なる方法

この記事では、JavaScript機能のブロックを定義するいくつかの方法を検討します。

JavaScript関数を宣言する方法を選択することは、初心者にとって混乱を招く可能性があり、いくつかの異なる構文オプションがあります。それぞれには、あなたを捕まえることができる利点、短所、適切な用途があります。

1。通常のJavaScript関数

JavaScriptの関数を宣言する最初で最も明白な方法は、関数宣言を使用することです。 2つのパラメーターxとyを取得するMultiply（）という名前の関数はそれらを乗算し、次の構文で実装できる値を返します。

この方法で定義されている

関数（関数宣言）は、

<span>function multiply(x<span>,y</span>) {
</span>  <span>return x * y;
</span><span>}
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

が現在の範囲の上部に巻かれています。 console.log（）は関数の前に配置できますが、それでも機能します。 2。 JavaScript関数式

同じ関数は、次の例に示すように、変数を明示的に設定する式として記述できます。

関数は巻き上げられていないため、定義された後にのみ使用できます。

3。オブジェクトリテラルメソッド定義

<span>const multiply = function(x<span>,y</span>) {
</span>  <span>return x * y;
</span><span>}
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

関数は、JavaScriptの他の値タイプと同じで扱われるため、別のオブジェクトに定義できます。たとえば、

繰り返しますが、このオブジェクトメソッドは定義された後にのみ呼び出すことができます。

4。 ES2015矢印関数

<span>const mathLib = {
</span>
  <span>// property
</span>  <span>PI: 3.14,
</span>
  <span>// multiply(x,y) method
</span>  <span>multiply: function(x<span>, y</span>) {
</span>    <span>return x * y;
</span>  <span>},
</span>
  <span>// divide(x,y) method
</span>  <span>divide: function(x<span>, y</span>) {
</span>    <span>return x / y;
</span>  <span>}
</span>
<span>}
</span>
<span>console.log( mathLib.multiply(2, 2) );
</span><span>// output: 4
</span>

矢印関数は関数キーワードを必要としませんが、変数にのみ割り当てるか、匿名で使用することはできます（コールバックやイベントハンドラーなど）。丸い括弧（（））に囲まれたパラメーターの後に矢印（=>）が続き、次のコードブロックで関数を示します。

ステートメントは1つしかないため、収益は暗黙的であり、より短い構文で同一の機能についてはブラケットを省略できます。

関数に単一のパラメーターがある場合、それらのブラケットも削除できます。

単一のパラメーターにはまだブラケットが必要ですが、

<span>const multiply = (x<span>, y</span>) => { return x * y; };
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

矢印関数は、これを即時の外側スコープの値に自動的に割り当てているため、.bind（this）。

<span>const multiply = (x<span>, y</span>) => x * y;
</span>

5。 jQuery拡張機能

jQueryはJavaScriptライブラリであるため、関数の作成はほぼ同じです。ただし、JQUERYの機能は、独自のカスタムメソッドを追加することで拡張できます。 jquery.fn.extend（）メソッドはjqueryプロトタイプ（$ .fn）オブジェクトを拡張します。これにより、新しい機能をメインjquery（）関数に連鎖させることができます。 たとえば、次のコードでは、新しいチェックを定義し、チェックボックス入力フィールドを変更するためにjqueryメソッドをチェックしてください：

<span>const square = x => x ** 2;
</span>

<span>function multiply(x<span>,y</span>) {
</span>  <span>return x * y;
</span><span>}
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

機能を維持

関数構文は個人的な好みの問題であることがよくありますが、コードを読みやすくしていることを確認してください。数週間以内に自分自身を混乱させて、巧妙ではあるが読みにくい矢印と括弧で自分自身を混同するよりも、それを使用する方が良いかもしれません。

jQuery関数の宣言に関するよくある質問（FAQ）

jQuery関数宣言とは？

jQuery関数宣言は、jQueryライブラリを使用してカスタム関数を作成するプロセスです。これらの関数は、特定のタスクを実行したり、DOMを操作したり、Webページ上の要素と対話したりするために使用できます。 $ .fn構文を使用し、その後に関数名を使用します。たとえば、

> $。fn.mycustomfunction= function（）{//ここに関数コード};

$（document）.read（）function？ はい、$（document）.ready（）関数の外でjquery関数を宣言できます。ただし、$（document）.ready（）関数内の関数を定義することは、DOMが操作する前に完全にロードされるようにすることをお勧めします。 🎜>

jQuery関数を宣言したら、選択したDOM要素で使用できます。たとえば、

> $（ "＃myElement"）。mycustomfunction（）;

カスタムjquery関数に引数を渡すことはできますか？ jQuery関数。関数宣言内の引数を宣言し、関数本文内でそれらを使用します：

$。fn.mycustomfunction= function（arg1、arg2）{// arg1およびarg2をここで使用};

jQueryメソッドカスタム関数を使用していますか？

はい、カスタム関数を他のjQueryメソッドにチェーンできます。関数が選択した要素を返してメソッドのチェーンを有効にしてください：

$。fn.mycustomfunction= function（）{//関数コードはこれを返します。 //メソッドチェーンの重要};

カスタムjQuery関数内の特定の要素をターゲットにするにはどうすればよいですか？

カスタムjQuery関数内で、これを使用して選択したDOM要素を参照できます（ s）。次に、これにjQueryメソッドを使用して希望する操作を適用できます。

私が宣言できるjQuery関数の数に制限はありますか？宣言できます。ただし、コードを整理し続け、読みやすさとメンテナンスのための過度の機能宣言を回避することをお勧めします。アプリケーションのニーズに基づいています。他のJavaScript関数と同様に、条件付きステートメントまたはループを使用して、必要に応じて関数を作成できます。

既存のjQuery関数をオーバーライドまたは拡張できますか？

はい、既存のjQuery関数をオーバーライドまたは拡張できます。組み込みのjQuery関数を上書きすることは意図しない結果をもたらす可能性があるため、カスタム関数を使用して機能を拡張する方が一般的に安全であることに留意してください。

主な違いは、jQuery関数がJQueryセレクターを使用して選択されたDOM要素と直接連携するように設計されていることです。それらはしばしばDOMの操作または相互作用を伴いますが、通常のJavaScript関数はより広範な範囲のタスクを処理できます。他のライブラリまたはコードとの競合を防ぎます。たとえば：

$。fn.myplugin_myfunction= function（）{//ここにある関数コードいくつかのベストプラクティス：

$（document）.ready（）関数内の関数をdom readinessのために定義します。 >コアjQuery関数の上書きまたは変更を避けて、予期しない動作を防止します。

以上がjQueryで関数を宣言する5つの異なる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。