Day18 this 默認綁定：總之就是認定你了！

2022 iThome 鐵人賽

DAY 18

Modern Web

就是要搞懂 JavaScript 啦！系列第 18 篇

14th鐵人賽

Emi

2022-10-03 21:58:00

501 瀏覽

分享至

默認綁定（Default Binding）

當函式未使用其他綁定方式，獨立被調用時，它所在的環境即是默認的全域環境，此時函式內部執行環境的 this 便預設指向全域物件。

function foo() {
	console.log( this.a );
}

var a = "global";

foo(); // global

嚴謹模式

但在嚴謹模式下，默認綁定會失效，如果沒有指名 this 的綁定對象，函式內的 this 最後會指向一個 undefined。

在全域使用嚴謹模式：

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

var a = "global";

foo();
// TypeError: Cannot read properties of undefined (reading 'a')

或在特定函式內使用：

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

function foo2() {
  console.log( this.a );
}

var a = "global";

foo1(); // undefined
foo2(); // global

要注意的是，嚴謹模式只和執行環境相關，與調用點無關：

function foo1() {
  "use strict"
  foo2() // 調用點
}

function foo2() {
  // 執行環境
  console.log(this.a);
}

var a = "global";

foo1(); // global

巢狀作用域裡的 `this`

在巢狀作用域中，關於 tihs 有個常會碰到的陷阱：

function outer() {
  console.log(
    "outer equal to obj:",
    this === obj
  );

  function inner() {
    console.log(
      "inner equal to obj:",
      this === obj
    );
    console.log(
      "inner equal to window:",
      this === window
    );
  }

  inner();
}

var obj = { outer }
obj.outer();

// outer equal to obj: true
// inner equal to obj: false
// inner equal to window: true

上面的程式碼在執行 obj.func1() 時隱含綁定（參考下一篇）了 func1() 的 this 指向 obj，但等到 func2() 執行時並沒有明確指定綁定對象，此時就會採用「預設綁定（Default Binding ）」，也就是指向全域物件。