資訊專欄INFORMATION COLUMN
在JavaScript中‘this’關(guān)鍵字是一個(gè)非常重要的概念，我們雖然知道它重要，但它也十分的晦澀難懂，也給我們學(xué)習(xí)造成不小的困擾。
什么是'this'關(guān)鍵字
'this'關(guān)鍵字是為每個(gè)執(zhí)行上下文(每個(gè)函數(shù))創(chuàng)建的一個(gè)特殊變量；所以一般來說，在使用'this'關(guān)鍵字的函數(shù)中，'this'永遠(yuǎn)是取其所有者的值?？偨Y(jié)一句話是該函數(shù)的所有者。這樣的抽象，很難理解，那么你現(xiàn)在只要記住'this'關(guān)鍵字的值不是靜態(tài)的，所以它總是不一樣。它的值取決于函數(shù)是怎么被調(diào)用的，這個(gè)是有在實(shí)際調(diào)用中才可以。就比如我們將x=4；那么x的值就是4，但是'this'關(guān)鍵字的值取決于函數(shù)的調(diào)用方式；所以現(xiàn)在我們來分析四種不同的調(diào)用函數(shù)的方式。
四種方式---1.調(diào)用函數(shù)的第一種方法是：將函數(shù)作為一種方法
Example: this代表一個(gè)對(duì)象
const bruce={
name:'bruce',
birthYear:2001,
calcAge:function () {
return 2022-this.birthYear
}
};
console.log(bruce.calcAge());//21`在上面的bruce對(duì)象里面有一個(gè)calcAge()函數(shù),這個(gè)函數(shù)是一個(gè)被附加到了bruce對(duì)象里面的函數(shù)。所以當(dāng)我們調(diào)用一個(gè)方法的時(shí)候，calcAge()里面的this將會(huì)指向這個(gè)對(duì)象；換句話來說，this所指的bruce這個(gè)對(duì)象正在調(diào)用這個(gè)方法。在代碼的最后一行，我們調(diào)用了這個(gè)函數(shù)；在calcAge()函數(shù)里面我們使用了this，那么這個(gè)this的值應(yīng)該是什么呢？沒錯(cuò)，這個(gè)this指的是bruce;所以this.birrhYear==bruce.birthYear==2001。
四種方式---2.調(diào)用函數(shù)的第二種方法是： 簡單的調(diào)用函數(shù)，不將函數(shù)作為方法，不附加到任何對(duì)象里面
Example: 此時(shí)this=undefined
const calcAge=function(birthYear){
console.log(2022-birthYear);
//查看此函數(shù)中的this
console.log(this);
}
calcAge(2001)結(jié)果如下：
像這樣常規(guī)的調(diào)用某個(gè)函數(shù)，只是簡單的調(diào)用某個(gè)函數(shù)，并沒有將這個(gè)函數(shù)添加到任何對(duì)象上面；可以這樣說這個(gè)this沒有主人，就是this指的就是window 。但是在嚴(yán)格模式下全局對(duì)象無法進(jìn)行默認(rèn)綁定，所以導(dǎo)致this只能綁定在undefined上。這就是this的默認(rèn)綁定規(guī)則：
this所處的詞法作用域在哪里生效this就綁定在哪里。
在嚴(yán)格模式下，全局對(duì)象無法進(jìn)行默認(rèn)綁定，所以導(dǎo)致this只能綁定在undefined上
四種方式---3.調(diào)用函數(shù)的第三種方法是:調(diào)用箭頭函數(shù)
箭頭函數(shù)沒有自己的this關(guān)鍵字
Example:
//3.箭頭函數(shù)的調(diào)用
const calcAge= birthYear => {
console.log(2022-birthYear);
//查看此函數(shù)中的this
console.log(this);
}
calcAge()執(zhí)行結(jié)果：
因?yàn)榧^函數(shù)沒有this，所以在箭頭函數(shù)里面的this是它外層作用域里面的非箭頭函數(shù)的this,而本例中外層作用域是window,所以這里的this指的是window
四種方式---4.調(diào)用函數(shù)的第四種方式：該函數(shù)被調(diào)用作為事件監(jiān)聽器
那么此時(shí)的this將會(huì)指向處理程序函數(shù)所附加到的DOM元素
深入理解this指向的是調(diào)用該方法的對(duì)象
這就意味著this關(guān)鍵字不會(huì)簡單的指向在我們編寫方法的對(duì)象上面。
在第一種函數(shù)調(diào)用的方式中，因?yàn)閎ruce是調(diào)用calaAge()方法的對(duì)象，所以此時(shí)this是bruce; 那么現(xiàn)在創(chuàng)建一個(gè)新對(duì)象：
const lucy={
birthYear:2006,
}我們都知道函數(shù)只是一個(gè)值，所以我們可以這樣：
const lucy={
birthYear:2006,
}
lucy.calcAge=bruce.calcAge
console.log(lucy);結(jié)果：
現(xiàn)在lucy里面也有了一個(gè)calcAge()方法，我們?cè)賮韴?zhí)行l(wèi)ucy.calcAge()
const lucy={
birthYear:2006,
}
lucy.calcAge=bruce.calcAge
console.log(lucy);
lucy.calcAge()結(jié)果為：
這就說明lucy對(duì)象調(diào)用calcAge()方法時(shí)，此時(shí)函數(shù)calcAge()方法里面的this指向的是lucy, 即調(diào)用該方法的對(duì)象。所以this關(guān)鍵字如上面所說，它不是靜態(tài)的，而是取決于函數(shù)的調(diào)用方式。
現(xiàn)在我們來定義一個(gè)常量y,并將bruce.calcAge()函數(shù)賦給它
const y=bruce.calcAge y()
結(jié)果為：
上面代碼中可以看到，當(dāng)y()只是作為一個(gè)普通函數(shù)來進(jìn)行調(diào)用，this是window
小結(jié)
對(duì)于很多初學(xué)者，this關(guān)鍵字是一個(gè)難點(diǎn)，其實(shí)我們可以簡單總結(jié)就是：
1.如果函數(shù)是以普通函數(shù)（非構(gòu)造函數(shù)）的形式調(diào)用，this指的永遠(yuǎn)都是window
2.如果函數(shù)是以方法的形式調(diào)用，this就是調(diào)用方法的那個(gè)對(duì)象
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/128194.html
摘要：關(guān)鍵字關(guān)鍵字是什么關(guān)鍵字是中最復(fù)雜的機(jī)制之一。它是一個(gè)很特別的關(guān)鍵字，被定義在所有函數(shù)的作用域中?？梢园堰@條規(guī)則看作是無法應(yīng)用其他規(guī)則時(shí)的默認(rèn)規(guī)則。 this關(guān)鍵字 this關(guān)鍵字是什么 this關(guān)鍵字是JavaScript中最復(fù)雜的機(jī)制之一。它是一個(gè)很特別的關(guān)鍵字，被定義在所有函數(shù)的作用域中。但是即使是非常有經(jīng)驗(yàn)的JavaScript開發(fā)者也很難說清它到底指向什么。1.this被定義...
摘要：但是，的本質(zhì)仍然是函數(shù)，是構(gòu)造函數(shù)的另外一種寫法。報(bào)錯(cuò)原生構(gòu)造函數(shù)的繼承對(duì)于一些原生的構(gòu)造函數(shù)，比如，，，等，在是無法通過方法實(shí)現(xiàn)原生函數(shù)的內(nèi)部屬性，原生函數(shù)內(nèi)部的無法綁定，內(nèi)部屬性獲得不了。 在沒有學(xué)習(xí) ES6 之前，學(xué)習(xí) React，真的是一件非常痛苦的事情。即使之前你對(duì) ES5 有著很好的基礎(chǔ)，包括閉包、函數(shù)、原型鏈和繼承，但是 React 中已經(jīng)普遍使用 ES6 的語法，包括 ...
摘要：前言在理想的狀態(tài)下，你可以在深入了解之前了解和開發(fā)的所有知識(shí)。繼承另一個(gè)類的類，通常稱為類或類，而正在擴(kuò)展的類稱為類或類。這種類型的組件稱為無狀態(tài)功能組件。在你有足夠的信心構(gòu)建用戶界面之后，最好學(xué)習(xí)。 原文地址：JavaScript Basics Before You Learn React 原文作者： Nathan Sebhastian 寫在前面 為了不浪費(fèi)大家的寶貴時(shí)間，在開...
摘要：布爾值和兩個(gè)值，與其他語言中似乎沒有任何區(qū)別以及特異所在。注意點(diǎn)中有類假的概念，即便不是也會(huì)被當(dāng)做處理，請(qǐng)注意下面幾個(gè)值布爾值未定義空字符串面向?qū)ο蠛苓z憾地說，設(shè)計(jì)的時(shí)候肯定沒有考慮。 JavaScript 特性 1.弱類型語言2.解釋型語言3.客戶端語言對(duì)于有學(xué)習(xí)Java、C以及Python一類的人來說，最熟悉的莫過于這些都是強(qiáng)類型語言。它們嚴(yán)格的遵守自身的規(guī)定，永遠(yuǎn)也不會(huì)有下面的情...
閱讀 596·2023-03-27 18:33
閱讀 790·2023-03-26 17:27
閱讀 684·2023-03-26 17:14
閱讀 645·2023-03-17 21:13
閱讀 573·2023-03-17 08:28
閱讀 1895·2023-02-27 22:32
閱讀 1376·2023-02-27 22:27
閱讀 2280·2023-01-20 08:28
