成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

快速理解JavaScript中this的用法與陷阱

Kylin_Mountain / 3626人閱讀

摘要：赫敏第三行的是在最外層執(zhí)行，也就是在全局對象下。而在對象下聲明了屬性，就相當(dāng)于羅恩，輸出的當(dāng)然就是羅恩。之所以寫這篇文章，是為了我下一篇文章做鋪墊快速理解中和的用法敬請期待

this是 JS 這門語言的魅力之一——靈活方便又難以捉摸，即使是有經(jīng)驗的程序員，如果不仔細(xì)也有可能搞錯，關(guān)于this的用法也成為許多公司的經(jīng)典面試題。

如果你寫過 Java ，你可能接觸過this——一般指向當(dāng)前對象，實際上，這時候this的含義已經(jīng)確定了，因為Java屬于編譯期綁定，而JS屬于運(yùn)行期綁定，所以導(dǎo)致this的含義在運(yùn)行過程中可能有多種變化。

進(jìn)一步說，this和它聲明環(huán)境無關(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對象本身的say()方法，此時this指代的是aaa對象本身，所以此時輸出當(dāng)然就是aaa對象的name屬性值。

第二行，bbb.say();輸出赫敏一定和JS新手們的常識不相符，其實只要牢記“this取決于執(zhí)行環(huán)境”就能想明白。bbb對象是怎么聲明自身的say方法的呢？它只是把a(bǔ)aa對象的say方法引用過來，注意，引用的是一個方法而非一個對象，而aaa.say存儲的是一個匿名函數(shù)，所以這種寫法和以下代碼并沒有什么區(qū)別。

var bbb = {
    name: "赫敏",
    say: function () {
        console.log(this.name);
    }
}

第三行的ccc()是在最外層執(zhí)行，也就是在全局對象window下。所以ccc()執(zhí)行的時候this指代的就是window對象。而在window對象下聲明了name屬性，就相當(dāng)于window.name = "羅恩"，輸出的當(dāng)然就是羅恩。

當(dāng)然，也有特殊情況，那就是 setTimeout 和 setInterval 。
我把開頭的aaa對象的聲明改成：

var aaa = {
    name: "哈利",
    getName: function () {
        setTimeout(function(){
            console.log(this.name);
        },100)
    }
}

僅僅是在console.log(this.name)外面套了一個setTimeout，猜猜原來三行的輸出會是什么？

答案：3個羅恩。
也就是說，三次this，指代的都是window對象。

關(guān)于為什么會這樣，我這里暫時不詳細(xì)展開，因為涉及到JS異步回調(diào)的知識，如果你僅僅想快速熟悉this的用法，那么只要記住這個特殊情況即可。這個知識點(diǎn)曾經(jīng)是阿里還是小米的面試題。

顯然，三個羅恩不是我想要的，畢竟韋斯萊夫人的孩子已經(jīng)夠多了。那么我們只需稍微改寫一下這個方法：

getName: function () {
        //在setTimeout外存儲this指代的對象
        var that = this;
        setTimeout(function(){
            //this.name變成了that.name
            console.log(that.name);
        },100)
    }

輸出就又正常了。

顯然，that并不是一個關(guān)鍵字，只是一個大家解決這種情況時約定俗成的名字。如果你愿意，也可以叫thatGuy。當(dāng)然，考慮到可能會有其他人維護(hù)你的代碼，還是用that比較好。

之所以寫這篇文章，是為了我下一篇文章做鋪墊：
《快速理解JavaScript中apply()和call()的用法》
敬請期待~~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/78847.html

相關(guān)文章

  • 快速理解JavaScript中apply()和call()的用法和用途

    摘要：在學(xué)習(xí)之前，我們必須對的作用和使用方法有所了解，可以參考我前一篇文章快速理解中的用法與陷阱。和的作用十分相似，只是參數(shù)類型上的差別，以適應(yīng)不同的使用場景。 在學(xué)習(xí)apply()之前，我們必須對this的作用和使用方法有所了解，可以參考我前一篇文章《快速理解JavaScript中this的用法與陷阱》。當(dāng)然如果你已經(jīng)熟悉this的相關(guān)知識，那么請直接往下看。 call()和apply()...

    chenjiang3 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    jsbintask 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    muddyway 評論0 收藏0

  • JavaScript深入淺出

    摘要：理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及，但是只要善于運(yùn)用，其實基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對方法，包括，，。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。 怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家?guī)韼椭?...（據(jù)說是阿里的前端妹子寫的） this 的值到底...

    blair 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<