JavaScript基礎(chǔ)之this和箭頭函數(shù)詳析

// (1) 使用箭頭函數(shù)，this一直指向window
var a = 0
var obj1 = {
  a: 1,
  fn: () => { console.log(this.a) }
}
obj1.fn() // 結(jié)果：0

var obj2 = {
  a: 2
}
obj2.fn = obj1.fn
obj2.fn() // 結(jié)果：0

// （2）不使用箭頭函數(shù)，this的指向會(huì)更改
var obj3 = {
  a: 3,
  fn: function() { console.log(this.a) }
}
obj3.fn() // 結(jié)果：3

var a = 0
test() // 調(diào)用位置在此，通過(guò)【默認(rèn)綁定規(guī)則】，可知test的this綁定到了window上
function test() {
  console.log(this) // this是window
  var obj1 = {
    a: 1,
    fn: function() {
      console.log(this) // this是obj1
      console.log(this.a) 
    }
  }
  obj1.fn() // 調(diào)用位置在此,通過(guò)【隱式綁定規(guī)則】，可知fn中的this綁定到了obj1上
  var obj2 = {
    a: 2
  }
  obj2.fn = obj1.fn
  obj2.fn() // 調(diào)用位置在此，【隱式綁定規(guī)則】，可知fn內(nèi)的this綁定到了obj2
}

var obj3 = {
  a: 3,
  fn: () => {
    console.log(this.a)
  }
}
obj3.fn() // 調(diào)用位置在此，this指向window

arrowFoo1() // （1）此處是調(diào)用位置，使用【默認(rèn)的綁定規(guī)則】，this = window
function arrowFoo1() {
  var obj1 = {
    vv: 'svv1',
    fn: () => {
      console.log(this.vv, 'vv的值是')
    }
  }
  // （2）調(diào)用位置是此處，若fn不是箭頭函數(shù)，那么這里也會(huì)有自己的this（即【隱式調(diào)用規(guī)則】，this綁定為obj1），而fn是箭頭函數(shù)，則它沒(méi)有this，那么fn內(nèi)部調(diào)用的this是誰(shuí)？
  // 這時(shí)候需要根據(jù)作用域的規(guī)則，往外層查找，找到哪里？找到調(diào)用obj1.fn的調(diào)用棧，即arrowFoo1函數(shù)的this，那么從（1）中可知，那個(gè)this指向的是window
  obj1.fn()
  var obj2 = {
    vv: 'svv2',
  }
  obj2.fn = obj1.fn
  obj2.fn()
}
function arrowFoo2() {
  var vv = '哦哦哦哦哦'
  console.log(this.vv, 'vv的值是')
}