十分钟弄懂js的call(),apply(),bind()

其实很简单，十分钟看完从一脸懵逼到完全理解。

先看下面的例子

例1

var name = '张三',age = '18'
var obj = {
    name:'李四',
    objAge:this.age,
    fn:function(){
        console.log('名字：' + this.name,'年龄：' + this.age)
    }
}
console.log(obj.objAge)
obj.fn();

例2

var name = '王五'
function shows(){
    console.log('名字：' + this.name)
}
shows()

 

 仔细对比这两个例子的this指向是不同的，一个指向obj，一个指向window

1.call()、apply()、bind() 都是用来重定义 this 这个对象的

var name = '张三',age = '18'
var obj = {
    name:'李四',
    objAge:this.age,
    fn:function(){
        console.log('名字：' + this.name,'年龄：' + this.age)
    }
}
var changeThis = {
    name:'王五',
    age:'0'
}
obj.fn.call(changeThis);
obj.fn.apply(changeThis);
obj.fn.bind(changeThis)();

 

以上出了 bind 方法后面多了个 () 外 ，结果返回都一致！

由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行。

2.对比call 、bind 、 apply 传参情况下

var name = '张三',age = '18'
var obj = {
    name:'李四',
    objAge:this.age,
    fn:function(lz,qw){
        console.log('名字：' + this.name + '年龄：' + this.age + '来自' + lz + '去往' + qw)
    }
}
var changeThis = {
    name:'王五',
    age:'0'
}
obj.fn.call(changeThis,'北京','上海');
obj.fn.apply(changeThis,['成都','上海']);
obj.fn.bind(changeThis,'长沙','武汉')();
obj.fn.bind(changeThis,['长沙','武汉'])();

 

微妙的差距！

从上面四个结果不难看出:

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.fn.call(changeThis,'北京', ... ,'string' )。

apply 的所有参数都必须放在一个数组里面传进去 obj.fn.apply(changeThis,['成都', ..., 'string' ])。

bind 除了返回是函数以外，它 的参数和 call 一样。