[學習筆記] 邊學邊寫 JavaScript 30天 (29)：this II

2022 iThome 鐵人賽

DAY 29

Modern Web

[學習筆記] 邊學邊寫 JavaScript 30天系列第 29 篇

14th鐵人賽

LeeFang

團隊好想工作室 v6.0

2022-10-14 18:37:45

510 瀏覽

分享至

今天內容

理解this小題目
強制綁定 this：bind
arrow function 的 this

筆記

理解this小題目(想完再到最下方看答案)

"use strict";
function log() {
  console.log(this);
}

var a = { a: 1, log: log };
var b = { a: 2, log: log };

log();
a.log();
b.log.apply(a)

強制綁定 this：bind

"use strict";
const obj = {
  a: 1,
  test: function() {
    console.log(this)
  }
}
obj.test()    //{ a: 1, test: [Function: test] }
const func = obj.test
func()   //undefined

以上面這個例子來看，func會找不到this值，可以用bind直接將this值綁定住。

"use strict";
const obj = {
  a: 1,
  test: function() {
    console.log(this)
  }
}
const func = obj.test.bind(obj)
func()   //{ a: 1, test: [Function: test] }

加上.bind(obj)可以直接將this綁到obj.test()

"use strict";
const obj = {
  a: 1,
  test: function() {
    console.log(this)
  }
}
const func = obj.test.bind("aaa")
func()  //aaa

bind可以直接賦值this值。

"use strict";
const obj = {
  a: 1,
  test: function() {
    console.log(this)
  }
}
const func = obj.test.bind("aaa")
func.call(123)  //aaa

就算用.call直接給this值也不會被再次改到。

arrow function 的 this，一樣的function寫成arrow function讓this的回傳不一樣。

class Test {
  run() {
    console.log("run this:", this)
    setTimeout(function() {
      console.log(this)
    }, 1000);
  }
}
const t = new Test()
t.run()

寫成 arrow function

class Test {
  run() {
    console.log("run this:", this)
    setTimeout( () => {
      console.log(this)
    }, 1000);
  }
}
const t = new Test()
t.run()

結果附圖：紅框處

arrow function裡面的this跟怎麼呼叫沒有關係，跟scope比較像，跟定義在哪裡比較有關係，這種情形比較像是特例。

理解this小題目(答案)

"use strict";
function log() {
  console.log(this);
}

var a = { a: 1, log: log };
var b = { a: 2, log: log };

log();    // undefined
a.log();  // { a: 1, log: [Function: log] }
b.log.call(a); // { a: 1, log: [Function: log] }
// b.log.call(a)括號內的a就是this的值，不用管.call前面是誰。