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