iT邦幫忙

2022 iThome 鐵人賽

DAY 18
0
Modern Web

就是要搞懂 JavaScript 啦!系列 第 18

Day18 this 默認綁定:總之就是認定你了!

  • 分享至 

  • xImage
  •  

默認綁定(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 )」,也就是指向全域物件。


參考資料


上一篇
Day17 this 綁定類型:賴上你的一百種方法(?)
下一篇
Day19 this 隱含綁定:這大概就是所謂的含蓄美吧
系列文
就是要搞懂 JavaScript 啦!73
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言