【前端面試題】箭頭函數中this指向問題

一、技術博客、視頻

技術博客：ES6中箭頭函數VS普通函數的this指向

視頻：
1.箭頭函數和this的指向問題（coderwhy老師）
2.箭頭函數和this指向問題（尚硅谷老師）

二、實例

// 1.this是靜態的，this始終指向函數聲明時所在作用域下的this的值
  // 如函數是在全局下定義的，則this指向window

  function getName() {
    console.log(this.name);
  }

  let getName2 = () => {
    console.log(this.name);
  }

  // 設置window對象的name屬性
  window.name = "我是全局"
  const others = {
    name: "我是對象"
  }

  // 直接調用
  getName();//輸出“我是全局”
  getName2();//輸出“我是全局”

// call方法調用，call方法可以改變函數內部的值
  getName.call(others)//輸出“我是對象”
  getName2.call(others)//輸出“我是全局”，
//箭頭函數的this是靜態的，無論怎么改變值，this始終指向聲明函數時的this值，如函數是在全局下定義的，則this指向window

（1）hello是全局函數，沒有直接調用它的對象，也沒有使用嚴格模式，this指向window

function hello() { 
   console.log(this);  // window 
}  
hello();

（2）hello是全局函數，沒有直接調用它的對象，但指定了嚴格模式（'use strict'），this指向undefined

function hello() { 
   'use strict';
   console.log(this);  // undefined
}  
hello();

（3）hello直接調用者是obj，第一個this指向obj，setTimeout里匿名函數沒有直接調用者，this指向window

const obj = {
    num: 10,
   hello: function () {
    console.log(this);    // obj
    setTimeout(function () {
      console.log(this);    // window
    });
   }    
}
obj.hello();

（4）hello直接調用者是obj，第一個this指向obj，setTimeout箭頭函數，this指向最近的函數的this指向，即也是obj

const obj = {
    num: 10,
   hello: function () {
    console.log(this);    // obj
    setTimeout(() => {
      console.log(this);    // obj
    });
   }    
}
obj.hello();

（5）diameter是普通函數，里面的this指向直接調用它的對象obj。perimeter是箭頭函數，this應該指向上下文函數this的指向，這里上下文沒有函數對象，就默認為window，而window里面沒有radius這個屬性，就返回為NaN。

const obj = {
  radius: 10,  
  diameter() {    
      return this.radius * 2
  },  
  perimeter: () => 2 * Math.PI * this.radius
}
console.log(obj.diameter())    // 20
console.log(obj.perimeter())    // NaN