|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
【示例】詳解JS里this的上下文對象及用法
作者:admin 時間:2022-5-7 10:53:4 瀏覽:在 JavaScript 編程中，this 是經(jīng)常用到的關(guān)鍵字。this 關(guān)鍵字是 JavaScript 中一個非常重要的概念，在 JavaScript 中，this 是對對象的引用。在本文中，我們將通過示例了解this基于上下文的隱式引用。
下面是四個上下文對象，在里面，this的值能被隱式引用。
全局上下文
在全局上下文中，this指的是全局對象。當(dāng)你在瀏覽器中工作時，全局上下文是window. 當(dāng)你在 Node.js 中工作時，全局上下文是global。
對于示例，你將在瀏覽器的開發(fā)者工具控制臺中練習(xí)代碼。如果你不熟悉在瀏覽器中運行 JavaScript 代碼，請閱讀如何使用瀏覽器開發(fā)者工具控制臺調(diào)試JavaScript。
如果你在沒有任何其他代碼的情況下記錄this的值，你將看到對象this指的是什么。
console.log(this)
輸出
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
可以看到this是Window，它是瀏覽器的全局對象。
你編寫一個頂級函數(shù)，或者一個不與任何對象關(guān)聯(lián)的函數(shù)，如下所示：
function printThis() {
console.log(this)
}
printThis()輸出
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
即使在函數(shù)內(nèi)，this仍然指的是Window，或全局對象。
但是，當(dāng)使用嚴(yán)格模式（'use strict'）時，全局上下文中函數(shù)內(nèi)的this上下文將為undefined。
'use strict'
function printThis() {
console.log(this)
}
printThis()
輸出
undefined
通常，使用嚴(yán)格模式（'use strict'）來降低this出現(xiàn)意外范圍的可能性會更安全。
對象方法
方法是對象上的函數(shù)，或?qū)ο罂梢詧?zhí)行的任務(wù)，函數(shù)使用this引用對象的屬性。
const webkaka = {
name: '卡卡網(wǎng)',
domainName: 'gazebo2go.com',
describe() {
console.log(`${this.name} 的域名是 ${this.domainName}`)
},
}
webkaka.describe()webkaka是對象，describe()是方法，它是webkaka對象里的一個函數(shù)，該函數(shù)使用了this引用webkak對象的兩個屬性：name和domainName。
輸出
"卡卡網(wǎng) 的域名是 gazebo2go.com"
在本例中，this 與 webkaka 相同。
函數(shù)構(gòu)造函數(shù)
當(dāng)你使用new關(guān)鍵字時，它會創(chuàng)建構(gòu)造函數(shù)或類的實例。函數(shù)構(gòu)造函數(shù)是初始化用戶定義對象的標(biāo)準(zhǔn)方法。
function Webkaka(name, domainName) {
this.name = name;
this.domainName= domainName;
this.describe = function () {
console.log(`${this.name} 的域名是 ${this.domainName}`);
}
}
const myweb = new Webkaka('卡卡網(wǎng)', 'gazebo2go.com');
myweb.describe();輸出
"卡卡網(wǎng) 的域名是 gazebo2go.com"
在此上下文中，this綁定到Webkaka的實例，該實例包含在myweb常量中。
類構(gòu)造函數(shù)
類的構(gòu)造函數(shù)的作用與函數(shù)的構(gòu)造函數(shù)相同。
class Webkaka{
constructor(name, domainName)
{
this.name = name;
this.domainName = domainName;
}
describe = function()
{
console.log(`${this.name} 的域名是 ${this.domainName}`);
}
}
const webkaka = new Webkaka('卡卡網(wǎng)', 'gazebo2go.com');
webkaka.describe();輸出
"卡卡網(wǎng) 的域名是 gazebo2go.com"
DOM 事件處理程序
在瀏覽器中，事件處理程序有一個特殊的this上下文。在由addEventListener調(diào)用的事件處理程序中，this將引用event.currentTarget，通常情況下，開發(fā)人員會簡單地使用event.target或event.currentTarget根據(jù)需要訪問 DOM 中的元素，但由于this引用在此上下文中會發(fā)生變化，因此了解這一點很重要。
在下面的示例中，我們將創(chuàng)建一個按鈕，向其添加文本，并將其附加到DOM中。當(dāng)我們在事件處理程序中記錄this的值時，它將打印目標(biāo)。
const button = document.createElement('button');
button.textContent = '點擊我';
document.body.append(button);
button.addEventListener('click', function (event) {
console.log(this);
})輸出
<button>點擊我</button>
將其粘貼到瀏覽器中后，你會在頁面上看到一個按鈕，上面寫著“點擊我”。如果單擊按鈕，你將看到<button>點擊我</button>出現(xiàn)在控制臺中，因為單擊按鈕會記錄元素，即按鈕本身。因此，如你所見，this指的是目標(biāo)元素，也就是我們添加了事件監(jiān)聽器的元素。
注意：此代碼要放在<body></body>標(biāo)簽之后，否則會報錯：document.body is null。
總結(jié)
在前面的所有示例中， this的值是由其上下文決定的——它是全局的、在對象中、在構(gòu)造函數(shù)或類中，還有在 DOM 事件處理程序上。
通過學(xué)習(xí)該文，你應(yīng)該了解了JavaScript中this關(guān)鍵字的概念及其具體用法，它是基于上下文的隱式引用。
相關(guān)文章
標(biāo)簽: this
