apply/call/bind とこれを JavaScript で

apply/call/bind の間の関係は、関数内で this が指す値を変更するためにすべて使用できることです。最初のパラメーターは指す this の値であり、apply の 2 番目のパラメーター (またはバインドとコールの値) 不定パラメータ) は渡されるパラメータです。これは、JavaScript の関数のこの点について言及する必要があります。

fun.apply(context,[argsArray])) について簡単に説明しましょう

fun をすぐに呼び出し、同時に fun 関数の元の this を渡された新しいコンテキスト オブジェクトにポイントすることで、同じメソッドで次のことを行うことができます。さまざまなオブジェクトで繰り返し使用できます。

context: fun 関数の元の this を置き換えて渡されるオブジェクト。

argsArray: 配列パラメーターが展開され、別の実パラメーターとして fun 関数に渡される配列または配列のようなオブジェクト。パラメータの順序に注意する必要があります。

fun.call(context,[arg1],[arg2],[…])

パラメータリストが異なることを除いて、applyと同じです。callのパラメータは1つずつ渡す必要があります。パラメータの数がわからない場合は、apply を使用します。

使用:

Math.max() //個々のパラメータのみを受け取ります。次のメソッドを通じて配列に対して max メソッドを使用できます:
Math.max.apply(null, array) // 配列の配列パラメータ別々のパラメータに展開され、
Array.prototype.push.apply(arr1, arr2) に渡されます。 // 配列を分割して別の配列にプッシュすると、後続の配列パラメータは 1 つの要素としてプッシュされます。
Array.prototype.slice.call(arguments); //分類子オブジェクトでスライスメソッドを使用します

function isArray(obj){
  return Object.prototype.toString.call(obj) === '[object Array]' ;
}  //验证是否是数组

fun.bind(context,[arg1],[arg2],[…])

fun メソッドによって実行されるコンテキストが変更されないようにします。

arg1: 新しい関数に渡されるパラメータリスト

以降の呼び出しのために関数を返します。その関数本体は元の関数 fun と同じですが、新しい関数の this は新しく渡されたコンテキスト オブジェクトを指します。 。新しい関数には、bind メソッドで指定された初期パラメータ arg1/arg2... が含まれます。その後、新しい関数を呼び出すときの実際のパラメータは、既存のパラメータの後ろに配置されます。

//原来的函数有4个参数
var displayArgs = function (val1, val2, val3, val4) {
  console.log(val1 + " " + val2 + " " + val3 + " " + val4);
}
var emptyObject = {};
// 生成新函数时bind方法指定了2个参数，则新函数会带着这个两个实参
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");
// 调用时传入另2个参数，要在bind方法传入的2个实参后面
displayArgs2("b", "c");
// Output: 12 a b c

イベントハンドラー関数でbindを使用します:

var obj = {
  arg1 : 1,
  attach: function(){
    //var self = this; 普通传入this 的方法
    $('xxx').on('click',function (event) {
      console.log(this.arg1);//若不绑定this，回调函数中的this常指目标元素
     }.bind(this));  //使用bind方法绑定this
  }
}

bind()メソッドを使用してslice()メソッドを書き換えます:

var _Slice = Array.prototype.slice;
var slice = Function.prototype.call.bind(_Slice);
slice(…);

bind( ）はI e5~ie8 処理と互換性があります

if (!Function.prototype.bind) {
  Function.prototype.bind = function(context) {
    var self = this, // 调用bind方法的目标函数
    args = arguments;
    return function() {
      self.apply(context, Array.prototype.slice.call(args, 1));//参数个数不确定时用apply
    }
  }
}

通常、setTimeout() の this はウィンドウまたはグローバル オブジェクトを指します。クラス メソッドを使用し、これがクラス インスタンスを指すようにする必要がある場合、self を渡す代わりに、bind() を使用してこれを呼び出し側オブジェクトにバインドできます。

this

このオブジェクトは、関数の実行時に関数の実行環境に基づいてバインドされます。グローバル関数では、これは window に等しく、関数がオブジェクトのメソッドとして呼び出される場合は、このオブジェクトがバインドされます。はそのオブジェクトと等しいです。

判定方法: 関数が実行されている場合、 . 演算子がある場合、これは . の前のオブジェクトを参照します。そうでない場合、これはウィンドウを参照します。 new キーワードが呼び出されると、新しいオブジェクトが参照されます。 apply/call/bindがある場合は第一パラメータを参照します。

/*例1*/
function foo() {
  console.log( this.a );
} 
var obj2 = {
  a: 42,
  foo: foo
};
var obj1 = {
  a: 2,
  obj2: obj2
};
obj1.obj2.foo(); // 42;当foo函数被调用时，其本身是归obj2所拥有
/*例2*/
function foo() {
  console.log( this.a );
} 
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo;   // bar引用foo函数本身
var a = "global";   // 全局对象的属性
bar();        // "global" ;

HTML DOM イベント ハンドラーでは、これは常にハンドラーがバインドされている DOM ノードを指します。

JavaScript での apply/call/bind およびこれに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。