資訊專(zhuān)欄INFORMATION COLUMN
摘要：赫敏第三行的是在最外層執(zhí)行，也就是在全局對(duì)象下。而在對(duì)象下聲明了屬性，就相當(dāng)于羅恩，輸出的當(dāng)然就是羅恩。之所以寫(xiě)這篇文章，是為了我下一篇文章做鋪墊快速理解中和的用法敬請(qǐng)期待
this是 JS 這門(mén)語(yǔ)言的魅力之一——靈活方便又難以捉摸，即使是有經(jīng)驗(yàn)的程序員，如果不仔細(xì)也有可能搞錯(cuò)，關(guān)于this的用法也成為許多公司的經(jīng)典面試題。
如果你寫(xiě)過(guò) Java ，你可能接觸過(guò)this——一般指向當(dāng)前對(duì)象，實(shí)際上，這時(shí)候this的含義已經(jīng)確定了，因?yàn)镴ava屬于編譯期綁定，而JS屬于運(yùn)行期綁定，所以導(dǎo)致this的含義在運(yùn)行過(guò)程中可能有多種變化。
進(jìn)一步說(shuō)，this和它聲明環(huán)境無(wú)關(guān)，而完全取決于他的執(zhí)行環(huán)境。務(wù)必牢記這句話。
//讀以下代碼之前，必須先閱讀《哈利·波特》原著。（笑）
var name = "羅恩";
var aaa = {
name: "哈利",
say: function () {
console.log(this.name);
}
}
var bbb = {
name: "赫敏",
say: aaa.say
}
var ccc = aaa.say;
aaa.say(); //哈利
bbb.say(); //赫敏
ccc(); //羅恩
我們看第一行，aaa.say()調(diào)用的是aaa對(duì)象本身的say()方法，此時(shí)this指代的是aaa對(duì)象本身，所以此時(shí)輸出當(dāng)然就是aaa對(duì)象的name屬性值。
第二行，bbb.say();輸出赫敏一定和JS新手們的常識(shí)不相符，其實(shí)只要牢記“this取決于執(zhí)行環(huán)境”就能想明白。bbb對(duì)象是怎么聲明自身的say方法的呢？它只是把a(bǔ)aa對(duì)象的say方法引用過(guò)來(lái)，注意，引用的是一個(gè)方法而非一個(gè)對(duì)象，而aaa.say存儲(chǔ)的是一個(gè)匿名函數(shù)，所以這種寫(xiě)法和以下代碼并沒(méi)有什么區(qū)別。
var bbb = {
name: "赫敏",
say: function () {
console.log(this.name);
}
}
第三行的ccc()是在最外層執(zhí)行，也就是在全局對(duì)象window下。所以ccc()執(zhí)行的時(shí)候this指代的就是window對(duì)象。而在window對(duì)象下聲明了name屬性，就相當(dāng)于window.name = "羅恩"，輸出的當(dāng)然就是羅恩。
當(dāng)然，也有特殊情況，那就是 setTimeout 和 setInterval 。
我把開(kāi)頭的aaa對(duì)象的聲明改成：
var aaa = {
name: "哈利",
getName: function () {
setTimeout(function(){
console.log(this.name);
},100)
}
}
僅僅是在console.log(this.name)外面套了一個(gè)setTimeout，猜猜原來(lái)三行的輸出會(huì)是什么？
答案：3個(gè)羅恩。
也就是說(shuō)，三次this，指代的都是window對(duì)象。
關(guān)于為什么會(huì)這樣，我這里暫時(shí)不詳細(xì)展開(kāi)，因?yàn)樯婕暗?strong>JS異步回調(diào)的知識(shí)，如果你僅僅想快速熟悉this的用法，那么只要記住這個(gè)特殊情況即可。這個(gè)知識(shí)點(diǎn)曾經(jīng)是阿里還是小米的面試題。
顯然，三個(gè)羅恩不是我想要的，畢竟韋斯萊夫人的孩子已經(jīng)夠多了。那么我們只需稍微改寫(xiě)一下這個(gè)方法：
getName: function () {
//在setTimeout外存儲(chǔ)this指代的對(duì)象
var that = this;
setTimeout(function(){
//this.name變成了that.name
console.log(that.name);
},100)
}
輸出就又正常了。
顯然，that并不是一個(gè)關(guān)鍵字，只是一個(gè)大家解決這種情況時(shí)約定俗成的名字。如果你愿意，也可以叫thatGuy。當(dāng)然，考慮到可能會(huì)有其他人維護(hù)你的代碼，還是用that比較好。
之所以寫(xiě)這篇文章，是為了我下一篇文章做鋪墊：
《快速理解JavaScript中apply()和call()的用法》
敬請(qǐng)期待~~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/78847.html
摘要：在學(xué)習(xí)之前，我們必須對(duì)的作用和使用方法有所了解，可以參考我前一篇文章快速理解中的用法與陷阱。和的作用十分相似，只是參數(shù)類(lèi)型上的差別，以適應(yīng)不同的使用場(chǎng)景。 在學(xué)習(xí)apply()之前，我們必須對(duì)this的作用和使用方法有所了解，可以參考我前一篇文章《快速理解JavaScript中this的用法與陷阱》。當(dāng)然如果你已經(jīng)熟悉this的相關(guān)知識(shí)，那么請(qǐng)直接往下看。 call()和apply()...
摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類(lèi)中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫(xiě)高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問(wèn)性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類(lèi) - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...
摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類(lèi)中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫(xiě)高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問(wèn)性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類(lèi) - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...
摘要：理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及，但是只要善于運(yùn)用，其實(shí)基于原型的繼承模型比傳統(tǒng)的類(lèi)繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對(duì)方法，包括，，。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 怎樣使用 this 因?yàn)楸救藢儆趥吻岸耍虼宋闹兄豢炊?8 成左右，希望能夠給大家?guī)?lái)幫助....（據(jù)說(shuō)是阿里的前端妹子寫(xiě)的） this 的值到底...
閱讀 2312·2021-09-26 10:21
閱讀 2785·2021-09-08 09:36
閱讀 3065·2019-08-30 15:56
閱讀 954·2019-08-30 12:57
閱讀 916·2019-08-26 10:39
閱讀 3554·2019-08-23 18:11
閱讀 3077·2019-08-23 17:12
閱讀 1070·2019-08-23 12:18
