call,apply,bind相同和不同之处

相同之处:

1.都是改变函数this的指向;

2.第一个参数都是要指向的对象;(第一个参数是null,undefined时,都会指向window)

3.都可以利用后续参数传参;

不同之处:

1.call,apply都是立即执行函数;bind返回函数;

2.call后面的参数都是和继承函数方法的参数一一对应;

3.apply后面的参数是数组或者类数组;

来上例子:

1.都是改变函数this的指向;call,apply都是立即执行函数;bind返回函数;(第一个参数是null,undefined时,都会指向window)

var fn = {

    a:1,

    b:2,

    show:function(){

        console.log(this.a+','+this.b)    

}}

var fn1 = {

            a:2,

            b:3

};

fn.show.call(fn1);fn.show.apply(fn1);//2,3//2,3

fn.show.bind(fn1);fn.show.bind(fn1)();// function(){   console.log(this.a+','+this.b) }  //2,3

补充一下,DOM对象绑定事件也属于方法调用模式,因此它绑定的this就是事件源DOM对象。如:

document.addEventListener('click',function(e){console.log(this);setTimeout(function(){console.log(this);},0);},false);//document//window;

setTimeout属于回调函数,第一个参数是null所以指向window;

2.var fn = {

    a:1,

    b:2,

    show:function(c){

        console.log(this.a+','+this.b+','+c)   }

}

var fn1 = {

            a:2,

            b:3

};

fn.show.call(fn1,5);fn.show.apply(fn1,[6]);//2,3,5//2,3,6

fn.show.bind(fn1,7)()//2,3,7

除此外, 在 ES6 的箭头函数下, call 和 apply 将失效, 对于箭头函数来说:

1.箭头函数体内的 this 对象, 就是定义时所在的对象, 而不是使用时所在的对象;所以不需要类似于var _this = this这种丑陋的写法

2.箭头函数不可以当作构造函数,也就是说不可以使用 new 命令, 否则会抛出一个错误

3.箭头函数不可以使用 arguments 对象,,该对象在函数体内不存在. 如果要用, 可以用 Rest 参数代替

4.不可以使用 yield 命令, 因此箭头函数不能用作 Generator 函数,

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容