理解'this”關鍵字
建立函數時，會建立一個名為 this 的關鍵字（在幕後），該關鍵字會連結到函數運行的物件。換句話說，this 可用於其函數的範圍，但它是對該函數作為屬性或方法的物件的參考。
#讓我們來看看上一篇文章中的 cody 物件：
範例：sample98.html
<!DOCTYPE html><html lang="en"><body><script>
var cody = {
living: true,
age: 23,
gender: 'male',
getGender: function () { return cody.gender; }
};
console.log(cody.getGender()); // Logs 'male'.
</script></body></html>
注意在getGender 函數內部，我們如何在cody 物件本身上使用點表示法(cody.gender) 存取gender 屬性。可以使用 this 重寫來存取 cody 對象，因為 this 指向 cody 物件。
範例：sample99.html
<!DOCTYPE html><html lang="en"><body><script>
var cody = {
living: true,
age: 23,
gender: 'male',
getGender: function () { return this.gender; }
};
console.log(cody.getGender()); // Logs 'male'.
</script></body></html>
this.gender 中使用的 this 只是指操作該函數的 cody 物件。
this 的主題可能會令人困惑，但事實並非如此。請記住，一般來說， this 在函數內部使用來引用該函數所包含的對象，而不是函數本身（例外情況包括使用new 關鍵字或 call() 和應用（））。
關鍵字 this 的外觀和行為與任何其他變數類似，只是您無法修改它。
與 arguments 和發送到函數的任何參數相反，this 是呼叫/激活物件中的關鍵字（而不是屬性）。
this 的值是如何決定的？
傳遞給所有函數的 this 的值是基於運行時呼叫該函數的上下文。請注意這裡，因為這是您只需要記住的怪癖之一。
以下程式碼範例中的 myObject 物件被賦予一個名為 sayFoo 的屬性，該屬性指向 sayFoo 函數。當從全域範圍呼叫 sayFoo 函數時，this 引用 window 物件。當作為 myObject 的方法呼叫時，this 指的是 myObject。
由於 myObject 有一個名為 foo 的屬性，因此使用該屬性。
範例：sample100.html
#
<!DOCTYPE html><html lang="en"><body><script>
var foo = 'foo';
var myObject = { foo: 'I am myObject.foo' };
var sayFoo = function () {
console.log(this['foo']);
};
// Give myObject a sayFoo property and have it point to the sayFoo function.
myObject.sayFoo = sayFoo;
myObject.sayFoo(); // Logs 'I am myObject.foo'.
sayFoo(); // Logs 'foo'.
</script></body></html>
顯然，this 的值是基於呼叫該函數的上下文。考慮 myObject.sayFoo 和 sayFoo 都指向相同的函式。但是，根據呼叫 sayFoo() 的位置（上下文），this 的值會有所不同。
如果有幫助，這裡是明確使用頭物件（window）的相同程式碼。
範例：sample101.html
#
<!DOCTYPE html><html lang="en"><body><script>
window.foo = 'foo';
window.myObject = { foo: 'I am myObject.foo' };
window.sayFoo = function () {
console.log(this.foo);
};
window.myObject.sayFoo = window.sayFoo;
window.myObject.sayFoo();
window.sayFoo();
</script></body></html>
確保當您傳遞函數或對函數進行多次引用時，您意識到 this 的值將根據您呼叫該函數的上下文而變化。
除 this 和 arguments 之外的所有變數都遵循詞法範圍
this 關鍵字引用巢狀函數中的頭物件
您可能想知道當 this 在一個包含在另一個函數中的函數內部使用時會發生什麼。壞消息是在 ECMA 3 中，this 迷失了方向並引用了頭物件（瀏覽器中的 window 物件），而不是定義該函數的物件。
在下面的程式碼中，func2 和func3 中的this 迷失了方向，並且不是指向myObject 而是指向頭對象。
範例：sample102.html
#
<!DOCTYPE html><html lang="en"><body><script>
var myObject = {
func1: function () {
console.log(this); // Logs myObject.
var func2 = function () {
console.log(this) // Logs window, and will do so from this point on.
var func3 = function () {
console.log(this); // Logs window, as it’s the head object.
} ();
} ();
}
}
myObject.func1();
</script></body></html>
好消息是，這個問題將會在 ECMAScript 5 中解決。現在，您應該意識到這種困境，尤其是當您開始將函數作為值傳遞給其他函數時。
考慮下一個範例以及將匿名函數傳遞給 foo.func1 時會發生什麼。當在 foo.func1 （函數中的函數）內部呼叫匿名函數時，匿名函數內部的 this 值將是對 head 物件的參考。
範例：sample103.html
#
<!DOCTYPE html><html lang="en"><body><script>
var foo = {
func1: function (bar) {
bar(); // Logs window, not foo.
console.log(this); // The this keyword here will be a reference to the foo object.
}
}
foo.func1(function () { console.log(this) });
</script></body></html>
現在你永遠不會忘記：當其宿主函數封裝在另一個函數內或在另一個函數的上下文中呼叫時，this 值將始終是對頭物件的參考（同樣，這在ECMAScript 5 中已修復） ）。
利用作用域鏈解決巢狀函數問題
為了讓 this 值不會遺失，您可以簡單地使用作用域鏈在父函數中保留對 this 的參考。以下範例示範如何使用名為 that 的變數並利用其作用域，我們可以更好地追蹤函數上下文。
範例：sample104.html
#
<!DOCTYPE html><html lang="en"><body><script>
var myObject = {
myProperty: 'I can see the light',
myMethod : function(){
var that = this; // Store a reference to this (myObject) in myMethod scope.
var helperFunction = function() { // Child function.
// Logs 'I can see the light' via scope chain because that = this.
console.log(that.myProperty); // Logs 'I can see the light'.
console.log(this); // Logs window object, if we don't use "that".
}();
}
}
myObject.myMethod(); // Invoke myMethod.
</script></body></html>
使用 call() 或 apply() 控制 this 的值
this 的值通常由调用函数的上下文确定（除非使用 new 关键字，稍后会详细介绍），但您可以使用 this 的值>apply() 或 call() 来定义调用函数时 this 指向什么对象。使用这些方法就像在说：“嘿，调用 X 函数，但告诉该函数使用 Z 对象作为 this 的值。”通过这样做，JavaScript 确定 this 值的默认方式将被覆盖。
在下一个示例中，我们创建一个对象和一个函数。然后我们通过 call() 调用该函数，以便函数内 this 的值使用 myObject 作为其上下文。 myFunction 函数内的语句将使用属性填充 myObject，而不是填充头对象。我们更改了 this （在 myFunction 内部）引用的对象。
示例：sample105.html
<!DOCTYPE html><html lang="en"><body><script>
var myObject = {};
var myFunction = function (param1, param2) {
// Set via call(), 'this' points to myObject when function is invoked.
this.foo = param1;
this.bar = param2;
console.log(this) // Logs Object {foo = 'foo', bar = 'bar'}
};
myFunction.call(myObject, 'foo', 'bar'); // Invoke function, set this value to myObject.
console.log(myObject) // Logs Object {foo = 'foo', bar = 'bar'}
</script></body></html>
在前面的示例中，我们使用了 call()，但也可以使用 apply()。两者之间的区别在于函数参数的传递方式。使用 call()，参数只是逗号分隔的值。使用 apply()，参数值在数组内部传递，如以下示例所示。
示例：sample106.html
<!DOCTYPE html><html lang="en"><body><script>
var myObject = {};
var myFunction = function (param1, param2) {
// Set via apply(), this points to myObject when function is invoked.
this.foo = param1;
this.bar = param2;
console.log(this) // Logs Object {foo = 'foo', bar = 'bar'}
};
myFunction.apply(myObject, ['foo', 'bar']); // Invoke function, set this value.
console.log(myObject) // Logs Object {foo = 'foo', bar = 'bar'}
</script></body></html>
这里您需要学习的是，您可以覆盖 JavaScript 在函数作用域中确定 this 值的默认方式。
在用户定义的构造函数中使用 this 关键字
当使用 new 关键字调用函数时，构造函数中声明的 this 的值指的是实例本身。换句话说：在构造函数中，我们可以在实际创建对象之前通过 this 来利用该对象。在这种情况下， this 的默认值的更改方式类似于使用 call() 或 apply()。
在下面的示例中，我们设置了一个 Person 构造函数，该函数使用 this 来引用正在创建的对象。当创建 Person 的实例时，this.name 将引用新创建的对象，并在新对象中放置一个名为 name 的属性，并将参数 (name) 中的值传递给构造函数。
示例：sample107.html
<!DOCTYPE html><html lang="en"><body><script>
var Person = function (name) {
this.name = name || 'john doe'; // this will refer to the instance created.
}
var cody = new Person('Cody Lindley'); // Create an instance based on the Person constructor.
console.log(cody.name); // Logs 'Cody Lindley'.
</script></body></html>
同样，当使用 new 关键字调用构造函数时，this 指的是“将成为的对象”。如果我们没有使用 new 关键字，则 this 的值将是调用 Person 的上下文 - 在本例中为头对象。让我们看一下以下场景：
示例：sample108.html
<!DOCTYPE html><html lang="en"><body><script>
var Person = function (name) {
this.name = name || 'john doe';
}
var cody = Person('Cody Lindley'); // Notice we did not use 'new'.
console.log(cody.name); // Undefined. The value is actually set at window.name
console.log(window.name); // Logs 'Cody Lindley'.
</script></body></html>
原型方法中的关键字 this 引用构造函数实例
当在添加到构造函数 prototype 属性的函数中使用时，this 指的是调用该方法的实例。假设我们有一个自定义 Person() 构造函数。作为参数，它需要人的全名。如果我们需要访问人员的全名，我们将 whatIsMyFullName 方法添加到 Person.prototype 中，以便所有 Person 实例继承该方法。当使用 this 时，该方法可以引用调用它的实例（以及它的属性）。
这里我演示了创建两个Person对象（cody和lisa）以及继承的whatIsMyFullName方法，其中包含this关键字来访问实例。
示例：sample109.html
<!DOCTYPE html><html lang="en"><body><script>
var Person = function (x) {
if (x) { this.fullName = x };
};
Person.prototype.whatIsMyFullName = function () {
return this.fullName; // 'this' refers to the instance created from Person()
}
var cody = new Person('cody lindley');
var lisa = new Person('lisa lindley');
// Call the inherited whatIsMyFullName method, which uses this to refer to the instance.
console.log(cody.whatIsMyFullName(), lisa.whatIsMyFullName());
/* The prototype chain is still in effect, so if the instance does not have a fullName property, it will look for it in the prototype chain. Next, we add a fullName property to both the Person prototype and the Object prototype. See the notes that follow this sample. */
Object.prototype.fullName = 'John Doe';
var john = new Person(); // No argument is passed so fullName is not added to the instance.
console.log(john.whatIsMyFullName()); // Logs 'John Doe'.
</script></body></html>
结论
这里要带走的概念是 that 关键字 this 用于在 prototype 对象中包含的方法内部使用时引用实例。如果实例不包含该属性，则开始查找原型。
如果 this 指向的实例或对象不包含所引用的属性，则应用适用于任何属性查找的相同规则，并且将在原型链上“查找”该属性。因此，在我们的示例中，如果 fullName 属性未包含在我们的实例中，则将在 Person.prototype.fullName 中查找 fullName 属性，然后在 Object.prototype.fullName 中查找。
以上是理解'this”關鍵字的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
從C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
JavaScript在行動中：現實世界中的示例和項目
Apr 19, 2025 am 12:13 AM
JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
了解JavaScript引擎：實施詳細信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：社區，圖書館和資源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。
Python vs. JavaScript：開發環境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
