箭頭函數與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