改变this指向call,apply、bind区别

262 阅读2分钟

call

function sum(a,b){
    console.log(this)
    console.log(a+b)
}
sum(2,3)

上面代码我们可以输出 Window 和 5 下面看看call如何使用

格式:函数对象.call(参1,参2…);
参1:新的this指向
参2:从参2开始,后面的参数代表函数自身的参数。

function sum(a,b){
    console.log(this)
    console.log(a+b)
}
sum.call("你好",2,3)

经过call修改打印发现 是 "你好" 和 5说明this指向被修改成你好

apply

 const arr=[]
        let obj={
            num:"版本"
        }
        function sum(a,b){
            console.log(this.num)
            console.log(a+b)
        }
        sum(1,2)

上述代码打印发现是 undefined 和 3 那么我们看看apply如何使用 格式:函数对象.apply(参1,参2);
参1:新的this指向
参2:数组,数组里是函数自带的参数

  const arr=[]
        let obj={
            num:"版本"
        }
        function sum(a,b){
            console.log(this.num)
            console.log(a+b)
        }
        sum.apply(obj,[1,2])

经过apply打印发现是 "版本"和3 说明this指向被修改成obj

bind

 let obj={
            num:50
        }
        function sum(a,b){
            console.log(this.num)
            console.log(a+b)
        }
        sum(3,5)

上面代码我们可以输出 undefined 和 8下面看看bind如何使用

格式:函数对象.bind(参1,参2…)();
参1:新的this指向
参2:从参2开始,后面的参数代表函数自身的参数。

   let obj={
            num:50
        }
        function sum(a,b){
            console.log(this.num)
            console.log(a+b)
        }
        sum.bind(obj,3,5)()

经过bind打印发现是 50和8 说明this指向被修改成obj

总结

1.call,apply,bind三者都能改变this指向,都是函数对象下面的方法。
2.bind返回的是函数体,所以需要再次调用而call,apply属于立刻调用
3.call和bind参数一样,第一个参数是this指向,第二个参数开始代表函数自身参数
4.apply第一个参数是this指向,第二个参数是一个数组,数组里是函数自带参数这也是和 call,bind的区别