JavaScript bindメソッド(Functionオブジェクト)

JavaScriptのbindメソッドのサンプルです。
Functionオブジェクトのメソッドです。

確認環境
・Windows10
・Google Chrome

目次

bindメソッド

関数名.bind(thisとして使われる値[, 引数1[, 引数2[, ...]]])
  • 1つめの引数はthisとして使われる値です。
  • 1つめの引数にnullまたはundefinedが指定されたとき
    →strictモードの時は、関数内のthisはnullまたはundefinedになります。
    →strictモードでない時は、関数内のthisはグローバルオブジェクトになります。
  • 2つめ以降の引数は、関数に渡される通常の引数です。
  • 戻り値は、新しい関数を返します。←callメソッドと違う部分です。
  • Functionオブジェクトのメソッドです。
  • 以下は、MDNのFunction.prototype.bind()のリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

コード

bindメソッドのサンプルです。

<script>

function test1(a,b,c){
	console.log(this); //Number {1}
	console.log(a); //2
	console.log(b); //3
	console.log(c); //undefined
}

const a = test1.bind(1,2); //新しい関数を返す

a(3); //実行

</script>

10行目は、bindメソッドです。引数の1はthisに、引数の2は5行目のaにあたります。新しい関数を返します。
12行目は、関数を実行しています。引数の3は、6行目のbにあたります。

1つめの引数がnullの場合

strictモードでないときで、bindメソッドの1つめの引数にnullをセットしたサンプルです。

<script>
var num = 100; //グローバル変数

function test1(a,b,c){
	console.log(this); //window
	console.log(window); //window
	console.log(this.num); //100
	console.log(window.num); //100
}

const a = test1.bind(null,2); //新しい関数を返す

a(3); //実行

</script>

5行目のthisは、グローバルオブジェクトを指します。6行目と同じ表示です。
7,8行目は、2行目のグローバル変数の値を表示します。
以下は、MDNのグローバルオブジェクトのリンクです。
https://developer.mozilla.org/ja/docs/Glossary/Global_object

関連の記事

JavaScript 関数のサンプル
JavaScript 再帰関数のサンプル
JavaScript 関数のデフォルト引数のサンプル
JavaScript 無名関数(アロー関数式)と即時関数のサンプル
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)
JavaScript argumentsオブジェクトのサンプル
JavaScript call/applyメソッド(Functionオブジェクト)

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る