JavaScript基础之this和箭头函数详析

// (1) 使用箭头函数，this一直指向window
var a = 0
var obj1 = {
  a: 1,
  fn: () => { console.log(this.a) }
}
obj1.fn() // 结果：0

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

// （2）不使用箭头函数，this的指向会更改
var obj3 = {
  a: 3,
  fn: function() { console.log(this.a) }
}
obj3.fn() // 结果：3

var a = 0
test() // 调用位置在此，通过【默认绑定规则】，可知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() // 调用位置在此,通过【隐式绑定规则】，可知fn中的this绑定到了obj1上
  var obj2 = {
    a: 2
  }
  obj2.fn = obj1.fn
  obj2.fn() // 调用位置在此，【隐式绑定规则】，可知fn内的this绑定到了obj2
}

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

arrowFoo1() // （1）此处是调用位置，使用【默认的绑定规则】，this = window
function arrowFoo1() {
  var obj1 = {
    vv: 'svv1',
    fn: () => {
      console.log(this.vv, 'vv的值是')
    }
  }
  // （2）调用位置是此处，若fn不是箭头函数，那么这里也会有自己的this（即【隐式调用规则】，this绑定为obj1），而fn是箭头函数，则它没有this，那么fn内部调用的this是谁？
  // 这时候需要根据作用域的规则，往外层查找，找到哪里？找到调用obj1.fn的调用栈，即arrowFoo1函数的this，那么从（1）中可知，那个this指向的是window
  obj1.fn()
  var obj2 = {
    vv: 'svv2',
  }
  obj2.fn = obj1.fn
  obj2.fn()
}
function arrowFoo2() {
  var vv = '哦哦哦哦哦'
  console.log(this.vv, 'vv的值是')
}