🔍 this 是什麼?
this 是 JavaScript 的一個關鍵字。
它是 function 執行時自動產生的一個內部物件。
this 的值會依據 函式的執行方式 而改變。
大多數情況下,this 代表「呼叫該函式的物件」。
📦 基礎範例
var age = 15;
function getAge() {
return this.age;
}
const people1 = {
age: 25,
getAge: getAge
};
const people2 = {
age: 18,
getAge: getAge
};
console.log(people1.getAge()); // 25 ✅
console.log(people2.getAge()); // 18 ✅
console.log(getAge()); // 15 (或 undefined) ❗
people1.getAge() 時,this 是 people1。
getAge() 直接呼叫時 → this 是 window(瀏覽器環境)或 global(Node.js server環境)。
所以最後一行會回傳 window.age = 15,但若在 "use strict" 模式下,會變成 undefined。
若函式沒有被任何物件呼叫(前面沒有 obj. ),this 預設就會指向 window。這種綁定方式叫做「預設綁定(Default Binding)」。
瀏覽器中的 window 是什麼?
window 是瀏覽器的全域物件,擁有:
document
localStoarge
console
...等全域API
🎯 練習範例解析
var foo = function() {
this.count++;
};
foo.count = 0;
for( var i = 0; i < 5; i++ ) {
foo();
}
console.log(foo.count)
this.count++ 操作的是 window.count,並不影響 foo.count。所以結果仍為 0。
var bar = function() {
console.log( this.a );
};
var foo = function() {
var a = 123;
this.bar();
};
foo();
輸出 undefined。
foo 內 this 為 window,呼叫 window.bar() bar內this為window,window.a未定義
var foo = 'foo';
var obj = {
foo: 'foo in Object'
};
var sayFoo = function() {
console.log( this.foo );
};
obj.sayFoo = sayFoo;
obj.sayFoo(); // foo in Object
sayFoo(); // foo
🧭 巢狀作用域中的 this :
var a = 1
var obj = {
var a = 2
fn1: function(){
console.log(this.a); // 2 ✅
var fn2 = function(){
var a = 3
console.log(this.a); // 1 ❗
};
fn2();
}
};
obj.fn1()
fn2 是直接呼叫的,this 指向 window,所以印出 1。
🎯 如何快速判斷 this?
✅ 判斷是否有 . 呼叫:
obj.fn() → this = obj(隱式綁定)
fn() → this = window(預設綁定)
📚 this 的 5 種綁定方式
類型專有名詞(Binding Type)綁定邏輯說明範例1️⃣ 預設綁定Default Binding函式直接呼叫 → this = window / globalsayHi()2️⃣ 隱式綁定Implicit Binding被物件呼叫 → this = 該物件obj.sayHi()3️⃣ 顯式綁定Explicit Bindingcall / apply / bind 明確設定 thissayHi.call(obj)4️⃣ new 綁定New Binding建構函式內 → this 是新創建的物件new Person()5️⃣ 箭頭綁定Lexical Binding箭頭函式固定綁定「定義當下」的作用域() => this.name
✅ 小結
this 的值不是固定的,而是根據函式被「如何呼叫」來決定的。
最容易搞錯的是 預設綁定 和 隱式綁定,本篇已完整介紹。
要預測 this,只需要問自己:是誰在呼叫這個函式?
🔜 下一篇將介紹:
call / apply / bind 的使用方式(顯式綁定)
new 關鍵字如何改變 this
為什麼箭頭函式不會有自己的 this?