Functionのbind()の例の詳細な説明

前書き

bind() は無数のパラメーターを受け入れます。最初のパラメーターは、生成される新しい関数の this ポイントです。たとえば、ウィンドウを渡す場合、どこで呼び出されても、この新しい関数の this は を指します。新しい関数のパラメータは、bind() の 2 番目、3 番目、4 番目...n 番目のパラメータとその元のパラメータです。 (わかりました、私自身混乱しています)

例の紹介

栗を見ると理解しやすいです。bind() を使用する最も基本的な方法を見てみましょう:

this.x = 9; 
var module = {
 x: 81,
 getX: function() { return this.x; }
};
 
module.getX(); // 返回 81
 
var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域
 
// 创建一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

ここでは、ウィンドウの下でそれを呼び出していることが明らかです。 objectretrieveX の場合、結果は window の下の x になるはずです。モジュール オブジェクトをretrieveX の this にバインドすると、どこで呼び出されても、this はモジュール オブジェクトを指します。

bind() には他にもパラメータがあります。初めてbind() に触れる友人は、上記の定義を見たときに混乱すると思います。

例を挙げてみましょう:

function list() {
 return Array.prototype.slice.call(arguments);
}
 
var list1 = list(1, 2, 3); // [1, 2, 3]
 
// 创建一个拥有预设初始参数的函数
var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});
 
var list2 = leadingThirtysevenList(); // [[69,37],{a:2}]
var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]

list 関数は非常に単純で、渡された各パラメーターを配列に挿入します。これは、リスト関数の初期値を設定するために使用します。リスト内のこのポインタを直接渡すので、2番目のパラメータから始めて、list2とlist3の戻り値ですべてを説明する必要があります。

私が通常、bind() を使用するシナリオは、setTimeout 関数と連携することです。これは、setTimeout を実行するときに、デフォルトで window オブジェクトを指すためです。bind() を使用する前に、次のことを行います。関数内でこれをキャッシュするポインターを定義します。これにより、どのように呼び出されても、Coder のインスタンスを指すようになります。しかし、もう 1 つ変数を定義するのは常に面倒です。

bind() を使用する方がはるかに簡単です。

function Coder(name) {
 var that = this;
 that.name = name;
 that.getName = function() {
  console.log(that.name)
 };
 that.delayGetName = function() {
  setTimeout(that.getName,1000)
 };
}
var me = new Coder('Jins')
me.delayGetName()//延迟一秒输出Jins

これで、setTimeout の this を外側の this に直接バインドできます。

Function の binding() の例の詳細な説明については、PHP 中国語 Web サイトに注目してください。