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及其餘兩個函數>屬性調用>直接調用