例を使用して JavaScript での呼び出し、適用、バインドを理解する |ブログ-jsチュートリアル-php.cn

Understand call, apply, and bind in JavaScript with Examples | Mbloging

JavaScript の call、apply、および bind メソッドは、関数内の this キーワードを制御するために重要です。これらは、特定のコンテキストで関数を呼び出す方法を提供するため、実際のコーディングシナリオで非常に役立ちます。

この記事では、各方法を詳細に説明し、それらの違いを検討し、いつ、そしてなぜそれらを使用する必要があるのかについての実践的な例を示します。

JavaScript では、`call`、`apply`、`bind` が重要なのはなぜですか?

JavaScript の

this キーワードは、常に期待どおりに動作するとは限らないため、扱いが難しいです。 call、apply、および bind メソッドを使用すると、関数内で this の値を明示的に設定できるため、一般的なスコープの問題の解決に役立ちます。

call()メソッド

call() メソッドを使用すると、関数を呼び出して、その this 値を指定されたコンテキスト (最初の引数) にすぐに設定できます。残りのパラメータは、カンマで区切られて 1 つずつ渡されます。

文法:

<code class="language-javascript">func.call(thisArg, arg1, arg2, ...)</code>

ログイン後にコピー

thisArg: 関数内の this の値。
arg1、arg2、...: 関数に渡されるパラメータ。

実践例: 借入方法

person と greet という 2 つのオブジェクトがあり、異なるコンテキストで greet 関数を使用したいとします。

<code class="language-javascript">const person = {
  name: "Alice",
  age: 25
};

function greet(city, country) {
  console.log(`Hello, my name is ${this.name}, and I am from ${city}, ${country}.`);
}

// 使用call借用greet函数
greet.call(person, "New York", "USA");
// 输出：Hello, my name is Alice, and I am from New York, USA.</code>

ログイン後にコピー

使用例:

これは、オブジェクトごとに同様のメソッドをオーバーライドする必要を避け、異なるオブジェクトで関数を再利用したい場合に便利です。

apply()メソッド

apply() は、パラメータの処理方法を除いて call() とほぼ同じです。パラメーターを 1 つずつ渡す代わりに、配列として渡します。

文法:

<code class="language-javascript">func.apply(thisArg, [argsArray])</code>

ログイン後にコピー

thisArg: 関数内の this の値。
argsArray: 関数に渡されるパラメーターの配列。

実際の例: 配列を使用した `Math.max`

配列から最大数を見つけたいとします。 JavaScript の Math.max() を配列で直接使用することはできませんが、apply() を使用して機能させることができます。

<code class="language-javascript">const numbers = [1, 5, 10, 15];

// 使用apply将数组元素作为单个参数传递
const maxNumber = Math.max.apply(null, numbers);
console.log(maxNumber); // 输出：15</code>

ログイン後にコピー

使用例:

配列に格納されたパラメータのリストを渡す必要がある場合に最適です。これは、apply() のような関数や、引数の数が不明な場合によく使用されます。 Math.max()

メソッドbind()

メソッドは、bind() や call() のように関数をすぐに呼び出しません。代わりに、固定の apply() 値と事前定義されたパラメーターを持つ新しい関数を返します。 this

文法:

<code class="language-javascript">func.call(thisArg, arg1, arg2, ...)</code>

ログイン後にコピー

thisArg: 関数内の this の値。
arg1、arg2、...: 新しい関数に永続的に設定されるパラメーター。

実際の例: プリセットパラメータ

クリックすると誰かの名前を挨拶するボタンがあるとします。 bind() を使用して、プリセット名を持つ新しい関数を作成できます。

<code class="language-javascript">const person = {
  name: "Alice",
  age: 25
};

function greet(city, country) {
  console.log(`Hello, my name is ${this.name}, and I am from ${city}, ${country}.`);
}

// 使用call借用greet函数
greet.call(person, "New York", "USA");
// 输出：Hello, my name is Alice, and I am from New York, USA.</code>

ログイン後にコピー

使用例:

bind() は、イベントハンドラーやコールバック関数を処理する場合など、後で特定のコンテキストで呼び出される関数を設定する必要がある場合に特に便利です。

`call`、`apply`、`bind`

の違い

主な違いを簡単に説明します:

call()メソッド

関数をすぐに呼び出す: はい
渡されるパラメータ: 単一パラメータ
新しい関数を返す: いいえ

apply()メソッド

関数をすぐに呼び出す: はい
渡されたパラメータ: 配列として
新しい関数を返す: いいえ

bind()メソッド

関数をすぐに呼び出す: いいえ
渡されるパラメータ: 単一パラメータ
新しい関数を返す: はい

各メソッドを使用する場合:

特定の this 値を持つ関数をすぐに呼び出す必要がある場合は、call() を使用します。
引数を配列として渡す必要がある場合は、apply() を使用します。
特にイベント駆動型コードで、固定の this 値と場合によっては事前設定されたパラメーターを使用して新しい関数を作成する場合は、bind() を使用します。

実際のシナリオ: イベント処理に `bind()` を使用する

Web アプリケーションを構築していて、ボタンによるユーザーの操作を処理する必要があるとします。 bind() を使用すると、正しいコンテキストを保持するより効率的なイベントハンドラーを作成できます。

<code class="language-javascript">func.apply(thisArg, [argsArray])</code>

ログイン後にコピー

説明:

bind() がない場合、click() 内の this は、Button オブジェクトではなくボタン要素自体を参照します。メソッドをバインドすることで、メソッドが正しいコンテキスト (btn1) を参照していることを確認します。

結論

JavaScript の

、call()、および apply() メソッドは、関数内の bind() コンテキストを制御できる強力なツールです。あるオブジェクトから別のオブジェクトにメソッドを借用する場合でも、パラメーターを動的に渡す場合でも、イベントハンドラーを設定する場合でも、これらのメソッドをマスターすると、コードがより柔軟で再利用可能になります。 this

、call、apply をいつどのように使用するかを理解すると、効率的で簡潔かつスケーラブルな JavaScript コードを作成する能力が大幅に向上します。 bind

よくある質問

JavaScript の call、apply、bind の違いは何ですか?
主な違いは、パラメータの処理方法です。 call() はパラメーターを個別に渡しますが、apply() はパラメーターを配列として渡します。 bind() 関数をすぐに呼び出すことなく、固定 this 値とオプションのプリセットパラメーターを使用して新しい関数を返します。
JavaScript では call、apply、bind をいつ使用する必要がありますか?
特定の this 値を持つ関数をすぐに呼び出す必要がある場合は、call() を使用します。引数の配列を関数に渡すときは、apply() を使用します。特にイベント処理やコールバックで、固定の this 値と事前設定されたパラメーターを使用して新しい関数を作成する必要がある場合は、bind() を使用します。
JavaScript の call、apply、bind はアロー関数で使用できますか?
いいえ、call()、apply()、および bind() は、周囲の字句コンテキスト this を継承するため、アロー関数には影響しません。そのため、これらのメソッドの使用は無関係です。
JavaScript で call を制御するために apply、bind、this を使用することが重要なのはなぜですか?
this の値は、関数の呼び出し方法によっては、JavaScript で予測できない場合があります。 call()、apply()、および bind() を使用すると、this の値を明示的に設定できるため、一般的なスコープエラーを防ぎ、コードが期待どおりに実行されるようになります。
JavaScript の call のような組み込み関数で apply、bind、Math.max() を使用できますか?
はい、apply() を使用して、配列自体を受け入れない Math.max() のような関数に配列を渡すことができます。同様に、call() を使用して、組み込み関数に引数を個別に渡すことができます。