this

this 在 JavaScript 中是個很容易被誤解的主題，主要會跟呼叫方法以及函式類型有關，導致很多非預期的結果出現。讓我們來重新好好認識 this 吧！

傳統函式

this 指的是「函式被誰呼叫（呼叫的主體）」

傳統函式中的 this 只跟「調用方式」有關，物件下呼叫的 this 基本上都是指向該物件

JS() 是直接呼叫，沒有物件當作接頭人
所以 this 是 全域物件（在瀏覽器是 window）
this.A 變成 window.A，所以是 'Global'

function JS() {
  console.log(this.A);
}
var A = 'Global';
JS(); // => Global

誰呼叫這個函式？obj
所以 this 就是 obj
this.A 就是 obj.A → 'Scope'

var A = 'Global';
function JS() {
  console.log(this.A);
}

var obj = {
  A: 'Scope',
  JS() {
    console.log(this.A);
  }
}
obj.JS(); // => Scope

JS() 是直接呼叫，不管你在 fn() 裡或在哪裡
this 還是指全域（window）

var A = 'Global';
function JS() {
  console.log(this.A);
}

var obj = {
  A: 'obj',
  fn() {
    JS(); // simple call
  }
}
obj.fn();  // Global

setTimeout() 裡的 function 是 callback function（simple call）
所以 this 是 window

var obj = {
  A: 'obj',
  fn() {
    setTimeout(function() {
      console.log(this.A);
    }, 100);
  }
};
obj.fn(); // => Global

箭頭函式

箭頭函式的 this 取決於定義它的那一刻所處的外層作用域，不是哪個物件「擁有」或「執行」它時。

箭頭函式會自動加上 return（若省略大括號），箭頭函式沒有自己的 this，this 會繼承外層函式作用域，this 請往外層看

this 繼承外層

var name = 'Global';
// 傳統函式
const person = {
  name: 'Ming',
  callName: function() {
    console.log('1', this.name);   // Ming

    setTimeout(function() {
      console.log('2', this.name); // Global (simple call)
      console.log('3', this);      // window
    }, 10);
  }
};
person.callName();

// 箭頭函式
const person = {
  name: 'Ming',
  callName: function() {
    console.log('1', this.name);   // Ming

    setTimeout(() => {
      console.log('2', this.name); // Ming
      console.log('3', this);      // person 物件
    }, 10);
  }
};
person.callName();

不要用箭頭函式當物件方法！

箭頭函式沒有自己的 this，它在宣告時就被綁定到外層作用域的 this（這裡是全域）

var name = 'Global';
const person = {
  name: 'Ming',
  callName: () => {
    console.log(this.name); // Global ❌ 因為 this 定義時就指向了 window
  }
};
person.callName();

const person = {
  name: 'Ming',
  callMe() {
    const callName = () => {
      console.log(this.name); // Ming ✅ 因為 this 是指向外層 callName() 的 this
    };
    callName();
  }
};
person.callMe();

解法一：用變數綁定 this
解法二：箭頭函式繼承 this

var name = 'Global';
var obj = {
  name: 'obj',
  fn() {
    setTimeout(function() {
      console.log(this.name); // Global ❌
    });
  }
};
obj.fn();

var obj = {
  name: 'obj',
  fn() {
    // 1. 變數綁定 this
    const vm = this;
    setTimeout(function() {
      console.log(vm.name); // obj ✅
    });
    // 2. 箭頭函式繼承 this
    setTimeout(() => {
      console.log(this.name); // obj ✅
    });
  }
}
obj.fn();

原型 & 原型鏈

關於非同步 - AJAX & Promise

傳統函式
箭頭函式

Star on GitHub Create Issues