this指向总结

前言

做为JS中最难理解的知识点之一，不少时候都很难分清到底指向的是啥，学了好久都仍是处于一种云里雾里的状态。但又做为面试必考知识点之一，可以把这个问题研究透彻，对咱们之后不管是面试仍是工做都有很大用处。此次对this的使用方式作一个总结。

在构造函数中

let name='window'
function Person(name,age){
  this.name=name;
  this.age=age
}
let man=new Person('hkj',21)
console.log(man.name)   //hkj
复制代码

对于new这种方式来讲，this将永远绑定到被实例化的对象上

直接调用

var name='window'
function fun(){
  var name="name"
  console.log(this.name)
}
fun()       //window
复制代码

var name='window'
function fun(){
  var name='fun'
  console.log(this.name)
}
let obj={
  fun:fun,
  name:'hkj'
}
let f=obj.fun
f()         //window
复制代码

var name='window'
function hello(){
  var name='hello'
  console.log(this.name)
}
let obj1={
  name:'obj1',
  hello
}
let obj2={
  name:'obj2',
  obj1
}
let fun=obj2.obj1.hello;
fun()       //window
复制代码

对于这直接调用方法来讲，最后只要相似fun()这种调用，this最后都指向window

箭头函数

var name='hkj'
function fun(){
  var name="hkj1"
  return ()=>{
    var name='hkj2'
    console.log(this.name)          //hkj
    return ()=>{
      var name='hkj3'
      console.log(this.name)        //hkj
    }
  }
}
fun()()()
复制代码

不管嵌套多少层箭头函数中的this与最外层非箭头函数this相同，最外层非箭头函数为fun()，其中的this指向window因此里面两个箭头函数也同样。

当作属性调用

var name='window'
function fun(){
  var name='fun'
  console.log(this.name)
}
let obj={
  fun:fun,
  name:'hkj'
}
obj.fun()       //hkj
复制代码

被当作属性调用时，函数中this指向对最后一个调用函数的对象。这里指向obj,因此name为hkj

var name='window'
function hello(){
  var name='hello'
  console.log(this.name)
}
let obj1={
  name:'obj1',
  hello
}
let obj2={
  name:'obj2',
  obj1
}
obj2.obj1.hello()           //obj1
复制代码

这里引用了多层，但用上面的方法判断,hello()前面是obj1,因此this指向obj1，最后name为obj1

定时器内this指向

var name='window'
function hello(){
  setTimeout(function(){
    console.log(this.name)
  }, 100);
}
let obj={
  name:'obj',
  hello
}
obj.hello()     //widow
复制代码

var name='window'
function hello(){
  console.log(this.name)
}
let obj={
  name:'obj',
  hello
}
setTimeout(obj.hello,1000)          //window
复制代码

按照上一种状况来讲，此时的this应该指向的是obj，但setTimeout是一种特殊状况，setTimeout中的this都指向window。

解决办法：改成箭头函数，在setTimeout外层将this赋值给其余变量而后传入，或者call，aplly，bind等

• 引用官方解释

call，apply，bind改变this指向

能够查看我下一篇博客:JS中的call、apply及bind。

绑定优先级

new>call及其余两个函数>属性调用>直接调用