JavaScript中改变this指针的注意事项

导读：

this的用法想必大家都是知道，简单理解this就是谁调用我，我只向谁。

在一般文章介绍中，都是介绍改变this指向的方法，如使用call、apply、bind

但经过测试，这句话一说出来就很不严谨。

关于this指向的细节

举例

var obj = {
    name:'vicer'
}

function person(){
    console.log(this.name)
}

person.call(obj)    

这里很容易得出，打印{name: "vicer"}。
不就是改变了this的指向吗？怎么不严谨了。我们接着往下看

我们添加一行代码

var obj = {
    name:'obj'
}

function person(){
    this.currentname = 'person'
    console.log(this)
}

person.call(obj)   

此时this打印的是谁的this？

{name: "obj", currentname: "person"}

两个this指向都打印出来了，所以这里使用call()、apply()、bind()时，他们都是添加this的指向（而不是改变）
唯一的区别只不过用法不同。

还有一种情况，让我们直接看代码

扫描二维码关注公众号，回复： 9551404 查看本文章

var obj = {
    name:'obj'
}

function person(){
    this.name = 'person'
    console.log(this)
}

person.call(obj)   

此时this中有两个name，这里就不卖关子了，优先打印的是person中的this

{currentname: "person"}

call、apply、bind的区别

这里再介绍一下区别

1. call后面传参数时，参数用逗号分隔

   var obj = {
       name: 'vicer'
   }
   
   function person(height, age) {
       console.log('名字：'+this.name)
       console.log('身高'+height)
       console.log('年龄'+age)
   }
   
   person.call(obj, 185, 18)
   //名字：vicer
   //身高185
   //年龄18

2. apply后面传参数时，只能以数组方式传入

   person.apply(obj, [185, 18])

3. bind传入参数，可以用逗号分隔，也可以传入数组，但需要主动调动才能改变this

   var p = person.bind(obj, 185, 18);
   p();