[JS] bind, call, apply



バインドは何ですか?


JavaScript関数は自分のthisを定義します.
  • ではこれは何ですか?
    たとえば、コンソールです.logを使用してチェックすると、windowオブジェクトが表示されます.ただし、このオブジェクトは必ずしもウィンドウオブジェクトではありません.オブジェクト内部メソッドを呼び出すと、作成者newを呼び出すと、明示的なbindに基づいてオブジェクトが変更されます.
  • Windowsオブジェクトとしてのみ使用したくない場合があります.もちろん、用途に応じて適切な形に変えて使いたいです.このような仕事をするのがthis bindingです.
    すなわち、これらthisをウィンドウではなく他のオブジェクトに変換する関数はbind、call、applyである.
    彼らの違いを簡単に整理すると以下のようになります.

    call & apply


    関数を呼び出します.thisに設定するオブジェクトを最初のパラメータに渡し、thisを変更して実行します.
  • コールとアプリケーションの違いは?
    1番目のパラメータ(この値を置換する)を除いて、2番目のパラメータを入力した後の他のパラメータの入力方法は異なります.違いは、次の例を参照してください.
  • const Object = { name: "dodogim"};
    
    const introduction = function(hobby) {
    	console.log(`my name is ${this.name}, My hobby is ${hobby}`);
    }
    
    introduction("piano"); //my name is , My hobby is piano
    introduction.call(Object, "piano"); //my name is dodogim, My hobby is piano
    introduction.apply(Object, ["piano"]); //my name is dodogim, My hobby is piano
    
    コール:直接入れてもいいです.
    apply:2番目のパラメータから、すべてのパラメータを配列に配置する必要があります.

    bind

    const result = introduction.bind(Object);
    result("piano"); //my name is dodogim, My hobby is piano 
    
    bind関数が前のcall,applyと異なる点は「実行しない」ことである.bound関数を返します.その動作は上のコードと同じです.例に示すように、マッピングした時点からObjectとして保有しており、後で使用することができる.残りのパラメータの設定はcallとapplyと同じです.