JavaScriptのbindメソッドで、thisの内容を指定するサンプルです。
目次
サンプル | bindとは |
1.bindを使用しない場合 | |
2.bindを使用してthisの値を指定 | |
3.bindの引数が2つのとき | |
4.thisにnullをセットした場合はWindowオブジェクト | |
5.引数を固定化する |
bindとは
関数名.bind(thisとして使われる値[, 引数1[, 引数2[, ...]]]) |
- thisの内容を意図して指定したい場合に使用します。引数も指定できます。
→同じプログラムでも設定により変化するメージです。 - 1つめの引数はthisとして使われる値です。
- 2つめ以降の引数は、関数に渡される通常の引数です。
- 戻り値は、新しい関数を返します。←callメソッドと違う部分です。
- Functionオブジェクトのメソッドです。
- 以下は、MDNのFunction.prototype.bind()のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
1.bindを使用しない場合
<script>
function test1() {
console.log(this); //windowオブジェクト
}
test1();
</script>
6行目で関数を実行すると、3行目のコンソールログでthisの内容が出力されます。
thisの内容は以下のようにwindowオブジェクトです。
2.bindを使用してthisの値を指定
<script>
function test1() {
console.log(this);
}
const test2 = test1.bind(1000);
test2(); // Number {1000}
</script>
6行目は、bindメソッドの引数に数値の1000を指定し新たな関数を生成しています。←callメソッドは新たな関数を生成しません。callメソッドとの違いです。
7行目は、test2関数の実行でコンソールログにthisの内容が出力されます。
3.bindの引数が2つのとき
<script>
function test1(a) {
console.log(this);
console.log(a);
}
const test2 = test1.bind(1000,2000);
test2(); // Number {1000} 2000
</script>
7行目は、bindメソッドで引数に数値の1000と2000を指定しています。
最初の値がthisになり、次の値が1つめの引数になります。
8行目は、コンソールログにthisの内容(Numberの1000)と引数の内容(2000)が出力されます。
4.thisにnullをセットした場合はWindowオブジェクト
<script>
function test1(a) {
console.log(this); //windowオブジェクト
console.log(a); //2000
}
const test2 = test1.bind(null,2000);
test2();
</script>
5.引数を固定化する
<script>
function test1(name1, name2) {
console.log(name1 + "と" + name2 + "です");
}
const test2 = test1.bind(null, "suzuki"); //bindする
test2("tanaka"); //suzukiとtanakaです
test2("sato"); //suzukiとsatoです
</script>
6行目は、2行目の1つめの引数にsuzukiをセットしています。
8,10行目とメソッドを実行していますが、1つ目の引数は常に6行目にセットしたsuzukiです。
関連の記事
JavaScript argumentsオブジェクトとcalleeのサンプル
JavaScript call thisの内容を指定する