例を使用して JavaScript での呼び出し、適用、バインドを理解する |ブログ

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

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

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

JavaScript の

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

1. call()メソッド

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

文法:

func.call(thisArg, arg1, arg2, ...)

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

実践例: 借入方法

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

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.

使用例:

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

2. apply()メソッド

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

文法:

func.apply(thisArg, [argsArray])

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

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

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

const numbers = [1, 5, 10, 15];

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

使用例:

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

3. メソッドbind()

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

文法:

func.call(thisArg, arg1, arg2, ...)

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

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

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

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.

使用例:

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

call、apply、bind

の違い

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

1. call()メソッド

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

2. apply()メソッド

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

3. bind()メソッド

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

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

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

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

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

func.apply(thisArg, [argsArray])

説明:

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

結論

JavaScript の

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

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

よくある質問

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

以上が例を使用して JavaScript での呼び出し、適用、バインドを理解する |ブログの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。