iT邦幫忙

0

【30 天JavaScript 實戰 】 Day26 |原型、class 與 OOP(下)

2025-12-28 23:11:23182 瀏覽
  • 分享至 

  • xImage
  •  

在學 JavaScript 的過程中,this 幾乎是很容易誤解的一個關鍵字
很多混亂並不是因為語法寫錯,而是一開始就用錯理解方式


一. this 不是寫在哪裡,而是「怎麼被呼叫」

this 的值,是在「函式被呼叫的那一刻」才決定
而不是在寫程式的時候就固定。

const obj = {
  name: "Amy",
  sayName() {
    console.log(this.name)
  }
}

obj.sayName() // Amy

這裡的 this 是 obj,是因為 obj 呼叫了這個方法

當呼叫方式一變,this 就會變
如果把同一個函式拿出來:

const fn = obj.sayName
fn()

這時已經不是 obj.sayName()
而是單純執行 fn()
因此 this 不再指向 obj

二. this 與 function / arrow function 的差異

在一般函式中,this 由呼叫方式決定
而在 arrow function 中 this 不會自己產生
會沿用外層作用域的 this
這也是為什麼在事件或 callback 中,
常常會看到 arrow function 被用來「保住 this」

三. 新手常見誤區整理

  • 以為 this 代表定義物件
  • 以為 this 永遠指向原本的物件
  • 用感覺猜 this,而不是看呼叫方式

但我們只要記住this 跟位置無關,跟呼叫有關
大部分錯誤都能避開~


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言