箭头函数与this指向问题

箭头函数中this的指向问题

1. 箭头函数不会改变this的指向，在它外面拿到的this是什么，它里面获取到的就是什么
2. setTimeout方法挂载在window上面，高程中写道，超时调用的代码都是在全局作用域下执行，非严格模式下this指向window对象，严格模式下为undefined
3. 老的通过闭包获取this的方法，都可以通过箭头函数来替换

// 箭头函数不会改变this指向

const obj = {
  name: 'xcc',
  func: function() {
    console.log('---1---', this)
  },
  func1: () => {
    console.log('---2---', this)
  },
  func2: function() {
    console.log('---3---', this)  // { name: 'xcc', ...}
    setTimeout(function() {
      console.log('---4---', this)
    }, 1000)
  },
  func3: function() {
    setTimeout(() => {
      console.log('---5---', this)
    }, 1500)
  },
  func4: function() {
    const _this = this
    setTimeout(function() {
      console.log('---6---', _this)
    }, 2000)
  }
}

obj.func()  // { name: 'xcc', func: [Function: func], func1: [Function: func1] }

// 箭头函数没有this的机制，在箭头函数外面拿到的是什么，在里面拿到的就是什么
obj.func1() // {}

console.log(this) // {}


obj.func2()

// setTimeout方法是挂在window对象下的。《JavaScript高级程序设计》第二版中，
// 写到：“超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefined”
// 箭头函数中的this始终都是指向当前作用域的this
obj.func3() // ---5--- { name: 'xcc', ...}


// 采用闭包来获取this
obj.func4() // ---6--- { name: 'xcc', ...}

this的调用究竟取决于什么？

1. this的指向取决于调用，而不是定义
2. 严格模式下以及浏览器端与node环境下有区别
3. 指向原则：沿着作用域向上找最近的一个function，看这个function最终是怎么样执行的

function foo() {
      console.log(this)
}

// 普通调用
foo() // => 指向全局(浏览器window，node global)，严格模式下undefined

// new 调用
new foo() // new 的时候是当构造函数去调用，此时 this => foo {}

// call/apply/bind
foo.call('111')  // => 自己指定this => 111

const obj1 = {
  foo: function() {
    console.log(this)
  }
}

// 情况1
// obj1.foo()  // obj1

// 情况2
// const fn = obj1.foo

// 等价于
// const fn = function() {
//  console.log(this)
// }

// fn()  // fn{}

const obj2 = {
  foo: function() {
    function bar() {
      console.log(this)
    }
    bar()
  }
}

obj2.foo()  // this => 全局

const obj3 = {
  foo: function() {
    console.log(this)
    const bar = () => {
      console.log(this)
    }
    bar()
  }
}

// 在这里this上面一个function是foo(箭头函数不是普通函数，不改变this的指向，拿到的是箭头函数外面一层的this，因此上面两个this相同)，foo是在obj3这里调用的，因此this指向obj3

obj3.foo()  // this => obj3