JS-一次搞懂 JavaScript 的 this

發表於 | 分類於

一次搞懂 JavaScript 的 this

前言

在 FB 直播看到 姚偉揚 老師再說明 javascript 各種 this 的分辨，在此紀錄各種案例。

FB影片：一次搞懂 JavaScript 的 this
主講者：姚偉揚

議程重點

  1. 一般函式的 this
  2. ES6 箭頭函式的 this
  3. Vue 組件的 this
  4. bind/apply/call 的 this

一般函式的 this

this 主要是 看函式(function)怎麼執行 的，下列為常見的分辨的方法

  • 直接執行 → global
  • 作為物件的成員函式執行 → 該物件
  • 作為 DOM 事件偵聽函式 → 該 DOM
  • 作為建構函式 → 建構出來的實例

下列為各種 this 的判斷

範例 1

直接呼叫
1
2
3
4
5
function a() {
  console.log(this);
}

a(); //window

範例 2

作為物件的成員函式執行
1
2
3
4
5
6
7
8
function a() {
  console.log(this);
}

const obj = {};
obj.a = a;

obj.a(); //obj

範例 3

1
2
3
4
5
6
7
8
9
10
const obj = {
  a() {
    function b() {
      console.log(this);
    }
    b();
  }
};

obj.a(); //window

因為 b() 是直接執行，並不是以 obj.b() 方式執行。

範例 4

DOM
1
<button id="btn">btn</button>
作為 DOM 事件偵聽函式
1
2
3
4
5
6
7
function a() {
  console.log(this);
}

const obj = { a };

btn.addEventListener("click", obj.a); //DOM元素：<button id='btn'>btn</button>

範例 5

DOM
1
<button id="btn">btn</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
function a() {
  console.log(this);
}

const obj = {
  b() {
    return function() {
      a();
    };
  }
};

btn.addEventListener("click", obj.b()); //window

因為 a() 是直接執行。

承上例，執行 obj.b() 後的函式
1
2
3
4
5
6
7
function a() {
  console.log(this);
}

btn.addEventListener("click", function() {
  a(); //window
});

範例 6

DOM
1
<button id="btn">btn</button>
1
2
3
4
5
6
7
8
9
const obj = {
  b() {
    return function() {
      console.log(this);
    };
  }
};

btn.addEventListener("click", obj.b()); //DOM元素：<button id='btn'>btn</button>
承上例，執行 obj.b() 後的函式
1
2
3
btn.addEventListener("click", function() {
  console.log(this);
});

範例 7

DOM
1
<button id="btn">btn</button>
1
2
3
4
5
6
7
8
9
10
11
function a() {
  console.log(this);
}

const obj = {
  a() {
    return a;
  }
};

btn.addEventListener("click", obj.a()); //DOM元素：<button id='btn'>btn</button>
承上例，執行 obj.a() 後的函式
1
2
3
btn.addEventListener("click", function() {
  console.log(this);
});
可注意觀察 範例5~7 程式碼之間有些微的不同，所造成的this有所不一樣。

善用的方式

另外一種思考的方式，我們在寫物件內的函式時，為了確保 this 能夠正確運作會先將它賦予在另一個變數上 (that, self, vm…)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var auntie = {
  name: "漂亮阿姨",

  callName() {
    // 先使用另一個變數指向 this，讓內層函式可以正確使用
    var that = this;

    setTimeout(function() {
      console.log(that); // auntie 這個物件
    }, 10);
  }
};

auntie.callName();

箭頭函式的 this

口訣：

箭頭函式裡面的 this 等於 外面的 this

白話文：

箭頭函式裡的 this 主要是依據 外層函式(function)裡的 this 是什麼就跟著是什麼。

規則

1
2
3
4
5
6
function x(){
  this <= 外層函式的this，規則參考「一般函式的this」
  const a = () => {
    this <= 依據外層函式的this
  }
}

範例 1

DOM
1
<button id="btn">btn</button>
1
2
3
4
5
const a = () => {
  console.log(this);
};

btn.addEventListener("click", a); //window

範例 2

1
2
3
4
5
6
7
const obj = {
  a: () => {
    console.log(this);
  }
};

obj.a(); //window

範例 3

DOM
1
<button id="btn">btn</button>
1
2
3
4
5
6
7
8
function a() {
  const b = () => {
    console.log(this);
  };
  b();
}

btn.addEventListener("click", a); //DOM元素：<button id='btn'>btn</button>

與 一般函式的範例 3 有點類似，雖然 b() 都是直接執行，
不過因為箭頭函式裡的 this 主要是依據 外層函式(function)裡的 this 是什麼就跟著是什麼，
所以 a() 的 this 是 DOM 元素，所以這裡的 b() 的 this 也會跟著是 DOM 元素。

範例 4

Q：包了好幾層的箭頭函數的 this 也是指向 windows 嗎?

A：從 c() 一層撥一層 直到 function a()，再參照 a() 的 this 是指向誰。

洋蔥式一層一層拆解
1
2
3
4
5
6
7
8
9
10
11
function a() {
  //this <= 外層函式的this，規則參考「一般函式的this」

  const b = () => {
    const c = () => {
      console.log(this); //<= 依據外層函式的this
    };
    c();
  };
  b();
}

Vue 組件的 this

全部皆指向 vue 實例 本身

範例 1

一般函數
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var vm = new Vue({
  el: "#app",
  data: {
    message: "Hello"
  },
  computed: {
    getMessage: function() {
      console.log(this); // this 指向 vm 实例
    }
  },
  methods: {
    prompt: function() {
      console.log(this); // this 指向 vm 实例
    }
  }
});

範例 2

箭頭函數
1
2
3
4
5
6
var vm = new Vue({
  el: "#app",
  methods: {
    test: () => console.log(this) //window
  }
});

範例 3

若是 vue 的建立是包在 函數 裡面時，使用 箭頭函數 ，則 this 要看外層函數的 this。

1
2
3
4
5
6
7
8
9
10
function init() {
  //this  <= 外層函式的this，規則參考「一般函式的this」

  var vm = new Vue({
    el: "#app",
    methods: {
      test: () => console.log(this) //<= 依據外層函式的this
    }
  });
}
如果在vue裡，寫箭頭函式要使用this的話，因為vue是物件，而不是函式，
此時箭頭函式裡的this會指向外層函式的this，
所以在vue要使用this的話，建議使用 一般函式 寫法。

bind/apply/call 的 this

  • 一般函式使用 bind/apply/call 時，this 就是所傳入的物件

  • 箭頭函式使用 bind/apply/call 時，this 不會有變化，規則一樣是 依據外層函式(function)裡的 this 是什麼就跟著是什麼。

範例 1

DOM
1
<button id="btn">btn</button>
一般函式
1
2
3
4
5
6
7
8
9
function add(x, y) {
  console.log(this);
}

const b = add.bind(btn);
b(3, 5);

add.apply(btn, [3, 5]);
add.call(btn, 3, 5);

範例 2

DOM
1
<button id="btn">btn</button>
箭頭函式
1
2
3
4
5
6
7
8
9
const add = (x, y) => {
  console.log(this);
};

const b = add.bind(btn);
b(3, 5);

add.apply(btn, [3, 5]);
add.call(btn, 3, 5);