JavaScript 関数の apply() および bind() メソッド

このチュートリアルでは、JavaScript 関数型の apply() および bind() メソッドの使用方法を説明します。

JavaScript Function.apply() メソッド

Function.prototype.apply() メソッドを使用して、指定されたパラメーターの配列と特定の this 値を使用して関数を呼び出すことができます。 apply() 関数の構文は次のとおりです。

Function.apply(thisArg, [args]);

apply() 関数には 2つのパラメータを送信できます。 thisArg パラメーターは、関数呼び出しに提供される this の値であり、args 引数は、関数の引数を定義する配列です。

args パラメータは、ES5 以降、配列オブジェクトまたは配列のようなオブジェクトのいずれかです。

call() メソッドと同様に、apply() メソッドは、関数のパラメーターを個々の引数ではなく配列として受け入れます。

apply() メソッドを使用した例をいくつか見てみましょう。 次のように、indivi オブジェクトと、gt という名前の挨拶関数があるとします。

const indivi = {
  fName: 'Shiv',
  lName: 'Yadav',
};
function gt(wave, sms) {
  return `${wave} ${this.fName}. ${sms}`;
}
let output = gt.apply(indivi, ['Hello', 'Where are you going?']);
console.log(output);

実行コード

wave と sms は gt() メソッドが取る 2つの引数です。 gt() 関数内の fName フィールドでオブジェクトを参照します。

以下の例を使用して、apply() メソッドを使用して、this を個々のオブジェクトに設定して gt() 関数を呼び出すことができます。

出力：

"Hello Shiv. Where are you going?"

上記の例では、indivi オブジェクトを関数内の this 値として設定しています。 apply() メソッドは、gt() 関数のパラメーターを配列として受け取りました。

gt() 関数は apply() メソッドによって呼び出され、パラメータは配列 ["Hello," "Where are you going?"] であり、この値は indivi オブジェクトに設定されます。 .

JavaScript Function.bind() メソッド

bind() メソッドによって作成された新しい関数の this キーワードは、呼び出されたときに指定された値に設定されます。 本当はもっと多くのトピックについて議論していますが、別の機会に取っておきます。

これには大きな力があります。 関数を呼び出すと、this の値を明示的に宣言できます。

コードを調べてみましょう。

var indivi = {
  fName: 'Shiv',
  lName: 'Yadav ',
  getIndiviName: function() {
    var fName = this.fName + ' ' + this.lName;
    return fName;
  },
};

var indiviName = function() {
  console.log(this.getIndiviName() + 'Where are you Going ?');
};

var logName = indiviName.bind(indivi);

logName();

実行コード

それを分析しましょう。 bind() 関数を使用すると、JS エンジンは indiviName の新しいインスタンスを作成し、indivi をこの変数としてバインドします。 indiviName 関数を複製していることを理解することが重要です。

logName() は元々 indivi オブジェクトにはありませんでしたが、現在は indiviName 関数を複製した後に呼び出すことができます。 これで、その属性 (Shiv と Yadav) とその実践を識別できるようになります。

重要な部分は、値がバインドされた後、他の通常の関数と同じように関数を利用できることです。

出力：

"Shiv Yadav Where are you Going ?"