JavaScriptのbind()メソッドの基本を整理
JavaScriptには、thisの参照を操作できるメソッドとして
call()、apply()、bind()の3種類あります。
しかし、bind()については他のcall()、apply()に比べて使い方がわかりにくい印象です。
あくまで基本的な挙動のみですが、
参考までに、自身の環境で確認したコードをメモとして残しておきます。
/* まず準備 */
// グローバル変数(グローバルオブジェクトのプロパティ)を定義
var name = "名無しの権兵衛";
// オブジェクト定義
let human01 = {
name: "佐藤",
};
let human02 = {
name: "鈴木",
};
// 関数定義
function getName (key) {
console.log(`${key}:${this.name}`);
}
/* 準備ここまで */
/*
定義した関数を呼出す。
ふつうに呼び出すと当然 this は グローバルオブジェクトを参照する。
*/
getName("名前"); // 名前:名無しの権兵衛
/*
Function.prototype.bind() を使って、
getName() 関数の this は human01 オブジェクトを参照したい。
その場合は、bind() の第一引数に紐付けたいオブジェクトを指定する。
*/
let getNameFunc = getName.bind(human01, "名前");
/*
bind() の戻り値で返される関数を呼び出すと、
this は human01 オブジェクトを参照できる。
*/
getNameFunc(); // 名前:佐藤
/*
のちに、call() や apply() を使えば、別のオブジェクトも参照できる。
*/
getName.call(human02, "名前"); // 名前:鈴木
参考になれば幸いです。
この記事が気に入ったらサポートをしてみませんか?