javascriptにcallをマスターし、 apply 、 bind ：包括的なガイド

この記事では、JavaScriptでのcall 、 apply 、およびbindのニュアンスを調(diào)査し、 this価値を制御する際の使用に焦點を當(dāng)てています。

JavaScriptの「This」の値を制御するために、 call 、 apply 、およびbind使用するにはどうすればよいですか？

JavaScriptでは、 thisキーワードは、現(xiàn)在実行中の関數(shù)を所有するオブジェクトを指します。ただし、特にコールバックとして渡されたり、イベントハンドラー內(nèi)で使用されたりする機(jī)能では、 this値は予測不可能です。 call 、 apply 、およびbind 、 thisの価値を明示的に設(shè)定する方法を提供し、機(jī)能のコンテキストを正確に制御できます。

• call() ：このメソッドはすぐに関數(shù)を呼び出し、 this値を最初の引數(shù)に設(shè)定します。その後の引數(shù)は、関數(shù)に対する個々の議論として渡されます。

 <code class="javascript">function greet(greeting) { console.log(greeting ", " this.name); } const person = { name: "Alice" }; greet.call(person, "Hello"); // Output: Hello, Alice</code>

• apply() ： call()と同様に、 apply()も機(jī)能をすぐに呼び出し、 thisの値を設(shè)定します。ただし、個々の引數(shù)の代わりに、引數(shù)の配列（または配列のようなオブジェクト）を受け入れます。

 <code class="javascript">function sum(a, b) { return ab this.value; } const obj = { value: 10 }; const numbers = [5, 3]; const result = sum.apply(obj, numbers); // Output: 18</code>

• bind() ： call() and apply()とは異なり、 bind()すぐに関數(shù)を呼び出しません。代わりに、呼び出されると、 this値が提供された値に設(shè)定される新しい関數(shù)を作成します。これは、部分的に適用された関數(shù)を作成したり、コールバックで一貫したthis値を確保するのに役立ちます。

 <code class="javascript">function sayHello() { console.log("Hello, " this.name); } const person = { name: "Bob" }; const boundSayHello = sayHello.bind(person); boundSayHello(); // Output: Hello, Bob</code>

javascriptでのcall 、 apply 、およびbindの実際的な違いは何ですか？

重要な違いは、関數(shù)と議論の処理方法を?qū)g行するときにあります。

• call() and apply() ：これらのメソッドはすぐに関數(shù)を?qū)g行します。 call()は個々の引數(shù)を取ります。 apply()は、一連の引數(shù)を取ります。少數(shù)の固定數(shù)の引數(shù)の場合は、 call()を選択し、配列または可変數(shù)の引數(shù)がある場合はapply() 。
• bind() ：このメソッドは、後で呼び出されると、指定された値にthisする新しい関數(shù)を返します。すぐに機(jī)能を?qū)g行しません。コールバックやイベントハンドラーなどの後の実行のためにthisコンテキストを事前に設(shè)定する必要がある場合は、 bind()を使用します。

javascriptの一般的な「この」キーワードの問題を解決するために、 call 、 apply 、およびbindにはどうすればよいですか？

一般的な「この」問題は、コールバック（ setTimeout 、 addEventListener ）で発生し、他の機(jī)能への引數(shù)として渡されます。 call 、 apply 、およびbindたソリューション：

• コールバック：コールバックでは、 thisしばしばグローバルオブジェクト（ブラウザのウィンドウ、または厳密なモードで定義されていない）を指します。 bind()はここで理想的です：

 <code class="javascript">const myObject = { name: "Charlie", logName: function() { console.log(this.name); } }; setTimeout(myObject.logName.bind(myObject), 1000); // Ensures 'this' refers to myObject</code>

• 方法として渡された方法：別の関數(shù)に引數(shù)としてメソッドを渡すと、 thisコンテキストが変わる可能性があります。 call()またはapply()は、正しいコンテキストを維持できます。

 <code class="javascript">function processData(callback) { const data = { value: 20 }; callback.call(data, data.value); //Ensures this refers to the data object } function myCallback(val){ console.log("Value is: " val " and this.value is: " this.value); } processData(myCallback); // Output: Value is: 20 and this.value is: 20</code>

JavaScript関數(shù)のコンテキストを操作するために、いつcall 、 apply 、またはbind必要がありますか？

選択は特定の狀況に依存します。

• 個々の引數(shù)を使用した即時実行： call()を使用します。
• 一連の引數(shù)を使用した即時実行： apply()を使用します。
• 遅延実行、 this事前設(shè)定します： bind()を使用します。

これらの違いを理解し、適切に適用することにより、JavaScriptコードでthisコンテキストを効果的に管理し、予期しない動作を回避し、より堅牢で保守可能な機(jī)能を書き込むことができます。

以上がこの「quot; JavaScriptで？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。