call/apply/bindメソッドとは？
いずれも関数（Functionオブジェクト）が提供するメンバーのことで、その関数を呼び出すことができます。関数の呼び出し側でthisを指定することができますよというものです。
call
callで私た第一引数が渡した関数内のthisになります。
|
1 2 3 4 |
const func = function () { console.log(this); }; func.call({ name: "太郎" }); |
通常だと、thisの中身はwindowオブジェクト、strictモードだとundefinedになるのでthisの中身を関数の外部から変更することができるというわけですね。
apply
以下の例ではcallと全く同じ挙動になります。
|
1 2 3 4 |
const func = function () { console.log(this); }; func.apply({ name: "太郎" }); |
bind
call/applyと違って元の関数を使って新しい関数を作り出すことができるメソッドになります。なので新しい関数を変数に代入して実行する形で使います。
|
1 2 3 4 5 |
const func = function () { console.log(this); }; const bindFunc = func.bind({ name: "太郎" }); bindFunc(); |
bindの注意点
bindで生成された関数に対してcallやapplyでまたthisを指定しようとしてもbindで生成したパラメータで固定されます。
callとapplyの違い
実行すべき関数funcに渡す引数の指定方法が異なるだけで基本的には同じです。関数に引数を指定したときのパラメータの指定方法が以下のように異なります。
|
1 2 3 4 5 |
const func = function (a, b) { console.log(this, a, b); }; func.call({ name: "太郎" }, 1, 2); // 個別に引数を渡す。 func.apply({ name: "太郎" }, [1, 2]);// 配列にして引数を渡す。 |
結論から言えば、特に違いはないので好きな方を使えば良いです。
call/applyメソッドのメリット
配列に似ているが、配列ではないオブジェクトを、配列に変換したりすることができます。（例えば、argumentsオブジェクトのように）
注意点
アロー関数にはcallもapplyも存在しないです。
この記事へのコメントはありません。