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

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;                 
        }
  }

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;
                    }
                }
  • angularJS不主动去加载视频?
  • 为什么分组捕获的是最后一个数字,不是第一个?
  • js 元素移动
  • Javascript 类的疑惑
  • 想实现百度搜索提示框,无法触发提示框中的单击事件
  • ES6和Promise/A+规范的区别
  • gulp压缩图片出错
  • svg小白,想要在svg里面插入图片
  • js在不更改class名字,不createElement("style”)的情况下修改伪元素内容
  • 有没有非markdown且对代码高亮友好的富文本编辑器
  • webstorm vue2 main.js import moudle的时候不起作用,灰色。