JavaScriptの適用、呼び出し＆バインド簡略化

範囲と価値のマスターの側面の1つthis JavaScriptではapply , call and bind 仕事.
本稿はこれらの方法を簡単にすることを目的とする.説明をできるだけ簡単にしましょう.this jsでは、関数が呼び出されている現在のコンテキストを参照します.カバーthis 詳細は、別の記事自体は、主要なポイントを覚えていることを決定することですthis オブジェクトは、関数が呼び出されている場所を確認する必要があります.
いくつかの可能性の中でthis , 我々は、JSが我々が何をセットするのを許す方法の3つについて議論しますthis 関数になります.
JS(他のほとんどの言語)で関数を呼び出すには、単にパラメータを渡して呼び出します.例:

function logMe(text) {
  console.log(text);
}

logMe('Canada')
// Output: 'Canada'

時apply , call and bind 画像に来て、それは私たちも、指定することができますthis 関数のオブジェクトです.
したがって、これらのメソッドを使用すると、JS関数を呼び出して呼び出すことができます.

スコープthis オブジェクトと

パーム
関数の呼び出しについて.

☎️ apply and callいずれも同様である.
使用されるとき、彼らは両方とも範囲または1を取るthis 最初のparamとしてのオブジェクトと、関数の引数/引数が続きます.
唯一の違いは、関数の引数が渡される方法です.

function invokeMe(val1, val2) {
  // Note that the first `val` comes from the "this" object
  // that the function is referring to
  // and `val1` and `val2` are the function arguments. 
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

invokeMe.apply(thisObj, [arg1, arg2]); // Output: 'JavaScript Hello World'

invokeMe.call(thisObj, arg1, arg2); // Output: 'JavaScript Hello World'

apply 引数を単一の配列で渡します.call 明示的に渡す引数をとります.
役に立つニーモニックIhere is
配列とCのコンマです

🤝 bind方法bind 同様の呼び出し構文も同様ですcall しかし、重要な違いはcall 関数を直ちに呼び出し、bind 関数をバインドし、後で呼び出すことができる新しい関数を作成します.

function invokeMe(val1, val2) {
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

// Binding the function ⬇
const bind1 = invokeMe.bind(thisObj, arg1, arg2); // No Output Yet
// Invoking the function ⬇
bind1(); // Output: 'JavaScript Hello World'

理解するbind , 関数をAと結合することにフォーカスしますthis スコープの呼び出し.
つまり、関数のバインド時に渡す必要のある引数は必要ありません.関数(通常のプログラミングスタイル)を呼び出すとき、それらは通過されることができます.

function invokeMe(val1, val2) {
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

// Binding the function ⬇
const bind2 = invokeMe.bind(thisObj); // No Output Yet
// Invoking the function ⬇
bind2(arg1, arg2); // Output: 'JavaScript Hello World'

それです.のためのキー使用法のガイドラインをカバーapply , call and bind . 説明では、Oopsでは、これらのメソッドは、新しいスコープオブジェクトに対して再書き込みすることなく、異なるオブジェクトに対して単一の関数を再利用するのを助けることを理解しています.