JavaScript の call()、apply()、bind() をマスターする: これを制御する

JavaScript の call()、apply()、bind() メソッドについて

JavaScript では、call()、apply()、bind() メソッドを使用して関数のコンテキスト (this) を制御し、関数が操作するオブジェクトを決定します。これらのメソッドを使用すると、特定の this 値を使用して関数を呼び出すことができ、関数がオブジェクトとどのように対話するかを管理するために不可欠です。

1.call() メソッド

call() メソッドを使用すると、特定の this 値と個々の引数を使用して関数を呼び出すことができます。これは、関数を呼び出すときにコンテキスト (this) を明示的に設定する方法の 1 つです。

構文:

functionName.call(thisArg, arg1, arg2, ...);

• thisArg: 関数内で this として使用される値。
• arg1, arg2, ...: 関数に渡される引数。

call() の例:

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person);  // Output: Hello, Alice!

この例では、call() を使用して、person オブジェクトを参照するgreet関数を呼び出します。そのため、出力は「こんにちは、アリス!」となります。

call() の使用例:

• 異なるコンテキストでのメソッドの呼び出し: call() を使用して、あるオブジェクトからメソッドを借用し、別のオブジェクトに適用できます。

2.apply() メソッド

apply() メソッドは call() に非常に似ていますが、引数を個別に渡すのではなく、配列または配列のようなオブジェクトとして渡します。この値は指定されたオブジェクトに設定されたままです。

構文:

functionName.apply(thisArg, [arg1, arg2, ...]);

• thisArg: 関数内で this として使用される値。
• [arg1, arg2, ...]: 関数に渡す引数を含む配列または配列に似たオブジェクト。

apply() の例:

function sum(a, b) {
  console.log(this.name, a + b);
}

const person = { name: 'Bob' };

sum.apply(person, [5, 10]);  // Output: Bob 15

この例では、apply() を使用して引数の配列 [5, 10] を sum 関数に渡し、この値は person オブジェクトに設定されるため、出力は「Bob 15」になります。

apply() の使用例:

• 引数の配列の受け渡し: 配列の形式で引数があり、それを関数に渡したい場合は、apply() を使用します。

3. bind() メソッド

bind() メソッドは、呼び出されるときに this が指定された値に設定される新しい関数を作成し、将来の呼び出しのために引数を事前設定できるようにします。 call() や apply() とは異なり、bind() は関数をすぐには呼び出しません。代わりに、後で呼び出すことができる新しい関数を返します。

構文:

functionName.call(thisArg, arg1, arg2, ...);

• thisArg: これがバインドされる値。
• arg1, arg2, ...: 事前に設定する引数。

bind() の例:

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person);  // Output: Hello, Alice!

ここで、bind() は新しい関数greetCharlie を作成し、これが person オブジェクトに永続的に設定されます。 welcomeCharlie() が呼び出されると、「こんにちは、チャーリー!」と出力されます。

bind() の使用例:

• 固定の this 値を使用した新しい関数の作成:bind() は、特定の this 値を保持する新しい関数を作成する必要がある場合に便利です。

call()、apply()、およびbind()の違い

機能

Feature	call()	apply()	bind()
Execution	Immediately invokes the function	Immediately invokes the function	Returns a new function (does not execute immediately)
Arguments	Pass arguments individually	Pass arguments as an array or array-like object	Pass arguments individually or preset them
Return Value	Returns the result of the function call	Returns the result of the function call	Returns a new function
Use Case	Call a function with a specified this value and arguments	Call a function with a specified this value and an array of arguments	Create a new function with a preset this value and arguments

call() apply() バインド() 実行 関数を即座に呼び出します 関数を即座に呼び出します 新しい関数を返します (すぐには実行されません) 引数 引数を個別に渡す 引数を配列または配列のようなオブジェクトとして渡す 引数を個別に渡すか、事前に設定します 戻り値 関数呼び出しの結果を返します 関数呼び出しの結果を返します 新しい関数を返します 使用例 この値と引数を指定して関数を呼び出す 指定された this 値と引数の配列を使用して関数を呼び出す この値と引数をプリセットして新しい関数を作成します テーブル>

例: call()、apply()、bind() の組み合わせ

functionName.call(thisArg, arg1, arg2, ...);

結論

• call() と apply() は、指定された this 値と引数で関数を即座に呼び出すために使用されます。
• bind() は、すぐに呼び出すことなく、指定されたこの値とオプションで事前に設定された引数を使用して新しい関数を作成するために使用されます。
• call() は個々の引数に便利ですが、apply() は引数の配列を渡すのに最適です。
• bind() は、後で固定コンテキスト (this) で呼び出すことができる関数を作成する場合に便利です。

これらのメソッドは、JavaScript でこのコンテキストを制御し、関数を処理するために、特にメソッドを借用したり、イベント ハンドラーを設定したりする場合に不可欠です。

---

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript の call()、apply()、bind() をマスターする: これを制御するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。