callback.call()和callback() 的区别

Question

jQuery中each方法的实现使用call方法，call方法可以设置上下文，第一，在下例中数组each效果一样，为什么不直接调用呢？

     if (likeArray(elements)) {
         for (i = 0; i < elements.length; i++) {
               callback(i, elements[i]);
           }
     }

if (likeArray(elements)) {
        for (i = 0; i < elements.length; i++) {
              if (callback.call(elements[i], i, elements[i]) === false) break;                 
        }
  }

Answer 1

Function.call

第一个问题：

通过call 可以改变this的指向。

var testCall = function(obj, callback){
    callback.call(obj, 1);
}

testCall(["一、改变this的指向", "二、函数内部可以通过this调用"], function(index){
    //使用 call方式调用，可以直接通过this访问 call 的第一个参数传入的对象。
    alert(this[index]); //二、函数内部可以通过this调用    
});

不使用 call方式调用，没有使用this。

var test = function(obj, callback){
    callback(obj, 1);
}

test(["一、改变this的指向", "二、函数内部可以通过this调用"], function(index){
    //不使用 call方式调用，没有使用this。
    alert(this[index]); //undefined
});

jQuery.each 应该就是使用 call 修改 的 this 指向；

$.each([1,2,3], function (index, item) {
    console.log({index:index,value:item,_this:this});
});

/*
  Object {index: 0, value: 1, _this: Number}
  Object {index: 1, value: 2, _this: Number}
  Object {index: 2, value: 3, _this: Number}
*/

没看 jQuery 源代码，用 callback.call 山寨个，应该实现方式是一样的。

var each = function(arr, callback){
  for( var index = 0 ; index < arr.length ; index++ ){
    callback.call(arr[index], index, arr[index]);
  }
}

each([1,2,3], function (index, item) {
    console.log({index:index,value:item,_this:this});
});

/*
  Object {index: 0, value: 1, _this: Number}
  Object {index: 1, value: 2, _this: Number}
  Object {index: 2, value: 3, _this: Number}
*/

注意：this，如果没有 使用 call，在回调函数中是没法使用 this 的。

第二个问题：
为什么each 不用用 callback，因为你写错了，函数传参数必须使用 括号。

for (key in elements) {
                    // callback[key, elements[key]]//这里不能工作
                    /*
                        应该是 callback(key, elements[key]);
                    */
                    if (callback.call(elements[key], key, elements[key]) === false) {
                        break;
                    }
                }