成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于javascript中的原型和原型鏈

SmallBoyO / 2690人閱讀

摘要：先來(lái)一個(gè)構(gòu)造函數(shù)構(gòu)造一個(gè)人類實(shí)例化一個(gè)對(duì)象看看的名字是什么打印結(jié)果先說(shuō)一個(gè)前提只要是函數(shù)，就會(huì)有一個(gè)屬性，可以理解為子代的原型遺傳基因只要是對(duì)象，就會(huì)有一個(gè)方法，可以理解為向上尋找原型的方法。

關(guān)于javascript中的原型和原型鏈
我GitHub上的菜鳥倉(cāng)庫(kù)地址： 點(diǎn)擊跳轉(zhuǎn)查看其他相關(guān)文章
文章在我的博客上的地址： 點(diǎn)擊跳轉(zhuǎn)

? ? ? ? 關(guān)于javascript中的原型和原型鏈，可能都會(huì)想到一個(gè)詞“prototype”，而實(shí)際里面藏的是什么東西，才是大家應(yīng)該要掌握的。

? ? ? ? 看過(guò)一些文章，將原型和原型鏈說(shuō)得很枯燥難懂，其實(shí)抽絲剝繭之后，理順?biāo)悸?，其?shí)原型和原型鏈沒有想象中的那么難以理解。我一直崇尚的是類比生活去理解，所以個(gè)人還是不太喜歡純敘述性的解釋。

? ? ? ? 其實(shí)很多講解的人，都是從自身角度出發(fā)的，解釋的都是理所當(dāng)然的，他們無(wú)法感受我們這些菜鳥的角度，不知道我們很多個(gè)為什么。當(dāng)然，當(dāng)我們了解理解之后，再重新看他們的文章，說(shuō)的也是頭頭是道的。

? ? ? ? 關(guān)于原型這個(gè)詞，其實(shí)很好理解，可以說(shuō)成是“原來(lái)的模型”。比如說(shuō)，“兒子長(zhǎng)得就像是爸爸一個(gè)模子出來(lái)一樣”，那爸爸就是兒子的原型，兒子繼承了爸爸的一些特征，當(dāng)然，兒子也會(huì)有自己的特征，這些特征，就是屬性。而有時(shí)候兒子有些特征沒有，可以在兒子的爸爸那里找到，甚至兒子爸爸那里找不到的特征，可以在爸爸的爸爸那里找到，而彼此之間維系著的，就是血緣關(guān)系，DNA傳遞，而這個(gè)關(guān)系鏈，就是我們說(shuō)的原型鏈，當(dāng)然，往上找祖先，找到最后肯定是炎帝黃帝了，他們就是人類始祖了，如果他們身上還找不到，再往上找，就是空了，因?yàn)橥暇蜎]有祖先了，本來(lái)無(wú)一物，何處惹塵埃。

? ? ? ? 好了，開始來(lái)代碼了。

? ? ? ? 先來(lái)一個(gè)構(gòu)造函數(shù)：

//構(gòu)造一個(gè)人類
function Mankind(name){
    this.name = name;
}

//實(shí)例化一個(gè)Dad對(duì)象
var Dad = new Mankind("BaBa");

//看看Dad的名字是什么
console.log(Dad.name);

//打印結(jié)果
BaBa

? ? ? ? 先說(shuō)一個(gè)前提:

? ? ? ? 只要是函數(shù)，就會(huì)有一個(gè) prototype 屬性，可以理解為子代的原型（遺傳基因）；只要是對(duì)象，就會(huì)有一個(gè)__proto__方法，可以理解為向上尋找原型的方法。

? ? ? ? 所以上面的構(gòu)造函數(shù)中，Mankind這個(gè)構(gòu)造函數(shù)，就會(huì)有一個(gè)prototype屬性（不是函數(shù)沒有），可以這樣訪問(wèn)：Mankind.prototype，當(dāng)然也可以給傳統(tǒng)基因添加其他特征：

//還是上面的構(gòu)造函數(shù)
function Mankind(name){
    this.name = name;
}

//還是實(shí)例化一個(gè)Dad對(duì)象
var Dad = new Mankind("BaBa");

//然后給構(gòu)造函數(shù)添加特征
Mankind.prototype.sayHello = "HaHaHa";

//看看Dad有沒有sayHello特征
console.log(Dad.sayHello);

//打印結(jié)果
HaHaHa

? ? ? ? 從結(jié)果可以看出，Dad本來(lái)沒有的sayHello特征，你給Dad的祖先添加了，Dad也會(huì)擁有這個(gè)特征了，其實(shí)這就是從原型鏈上找到這個(gè)屬性了。

? ? ? ? Dad對(duì)象這個(gè)實(shí)例的原型，就是Mankind.prototype這個(gè)遺傳基因。

? ? ? ? 而向上找原型，就是通過(guò)__proto__這個(gè)方法，所以：

Dad.__proto__ === Mankind.prototype ?//true

? ? ? ? 當(dāng)然，Mankind.prototype也是一個(gè)對(duì)象，當(dāng)然也有一個(gè)__proto__方法，通過(guò)這個(gè)方法，也是可以找到他再上一級(jí)的原型，所以：

Mankind.prototype.__proto__ === Object.prototype //true

? ? ? ? 這也是對(duì)的。因?yàn)楹瘮?shù)的祖先是Object，所以就是指向Object.prototype這個(gè)原型?。

    當(dāng)然，再往上找，就是空了。
Object.prototype.__proto__ ?=== null ?//true

? ? ? ? 所以各個(gè)原型組織起來(lái)，就是一條原型鏈了：

? ? ? ? Dad ---> Mankind.prototype ---> Object.prototype ---> null ? 可以看到從對(duì)象開始的原型鏈的規(guī)律

? ? ? ? 回過(guò)頭來(lái)，其實(shí)Mankind.prototype這個(gè)對(duì)象除了__proto__這個(gè)方法外，還有一個(gè)constructor的方法，因?yàn)镸ankind是函數(shù)，所以有這個(gè)方法，所以通過(guò)這個(gè)方法，可以訪問(wèn)到自身這個(gè)函數(shù)：

//打印一下Mankind.prototype.constructor
console.log(Mankind.prototype.constructor);

//打印結(jié)果
function Mankind(name){
    this.name = name;
}

? ? ? ? 說(shuō)到這里，相信已經(jīng)類比得很清楚了。然后又會(huì)有一個(gè)疑問(wèn)：

? ? ? ? 既然說(shuō)函數(shù)是對(duì)象(函數(shù)對(duì)象Function，普通對(duì)象Object，F(xiàn)unction是繼承于Object的)，那么前面的構(gòu)造函數(shù)Mankind可以有prototype屬性，也應(yīng)該有__proto__這個(gè)方法？

? ? ? ? 沒錯(cuò)，所以我們也可以有Mankind.__proto__這個(gè)方法訪問(wèn)原型:

Mankind.__proto__ === Function.prototype ?//true

? ? ? ? 當(dāng)然，F(xiàn)unction.prototype 也是可以通過(guò)__proto__方法訪問(wèn)原型：

Function.prototype.__proto__ === Object.prototype //true

? ? ? ? 所以也有這樣的原型鏈：

? ? ? ? Mankind ---> Function.prototype ---> Object.prototype ---> null ? 可以看到從函數(shù)開始的原型鏈的規(guī)律

? ? ? ? 當(dāng)然了，我們既然有一個(gè)實(shí)例的對(duì)象Dad，當(dāng)然也可以再延生下去，生一個(gè)Son來(lái)繼承Dad的啦：

//從Dad那里繼承，創(chuàng)建一個(gè)son對(duì)象，下面兩種方法都可以：
var Son = new Object(Dad);
var Son = Object.create(Dad);

//修改一下兒子的name
Son.name = "ErZi";

//打印一下兒子的name和原型鏈上父親的name
console.log(Son.name);
console.log(Son.__proto__.name);//通過(guò)__proto__方法找到父親Dad

//打印結(jié)果
ErZi
BaBa

? ? ? ? 所以這條原型鏈?zhǔn)沁@樣的：

? ? ? ? Son ---> Dad ---> Mankind.prototype ---> Object.prototype ---> null ? 對(duì)照從對(duì)象開始的原型鏈的規(guī)律

? ? ? ? 通過(guò)上面的一大頓啰嗦，相信已經(jīng)很清楚了，最后再說(shuō)一下雞和雞蛋的問(wèn)題：

? ? ? ? 上面既然說(shuō)到有Object.prototype，而且prototype是函數(shù)才有的，所以可以訪問(wèn)到Object這個(gè)構(gòu)造函數(shù)，可以用Object.prototype.constructor這個(gè)方法，當(dāng)然構(gòu)造函數(shù)是繼承于函數(shù)對(duì)象的，所以構(gòu)造函數(shù)原型又是Function.prototype，所以也有這樣的一條原型鏈：

? ? ? ? Object ---> Function.prototype ---> Object.prototype ---> null ? 對(duì)照從函數(shù)開始的原型鏈的規(guī)律（這里的Object是構(gòu)造函數(shù)）

? ? ? ? 或者表示為：

? ? ? ? Object.prototype.constructor---> Function.prototype ---> Object.prototype ---> null

? ? ? ? 這就是雞和雞蛋的問(wèn)題了。

? ? ? ? 最最后，放上一張網(wǎng)絡(luò)上解釋很清楚的原型鏈圖，再結(jié)合我上面的啰嗦，相信就很清楚容易明白了。
? ? ? ?

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84257.html

相關(guān)文章

  • 關(guān)于javascript的原型和原型鏈，看我就夠了（一）

    摘要：要用作原型的對(duì)象。函數(shù)對(duì)象可以創(chuàng)建普通對(duì)象，這個(gè)我們上面講過(guò)了回顧一下這是一個(gè)自定義構(gòu)造函數(shù)普通對(duì)象沒法創(chuàng)建函數(shù)對(duì)象，凡是通過(guò)創(chuàng)建的對(duì)象都是函數(shù)對(duì)象，其他都是普通對(duì)象通常通過(guò)創(chuàng)建，可以通過(guò)來(lái)判斷。 關(guān)于js的原型和原型鏈，有人覺得這是很頭疼的一塊知識(shí)點(diǎn)，其實(shí)不然，它很基礎(chǔ)，不信，往下看要了解原型和原型鏈，我們得先從對(duì)象說(shuō)起 創(chuàng)建對(duì)象 創(chuàng)建對(duì)象的三種方式： 對(duì)象直接量 通過(guò)對(duì)象直接量創(chuàng)建...

    MoAir 評(píng)論0 收藏0

  • 關(guān)于javascript的原型和原型鏈，看我就夠了（二）

    摘要：原文鏈接關(guān)于的原型和原型鏈，看我就夠了一參考鏈接闖關(guān)記之原型及原型鏈之原型與原型鏈一篇文章帶你理解原型和原型鏈徹底理解原型鏈一的默認(rèn)指向圖解和的三角關(guān)系原型和原型鏈三張圖搞懂的原型對(duì)象與原型鏈 溫故 創(chuàng)建對(duì)象的三種方式 通過(guò)對(duì)象直接量 通過(guò)new創(chuàng)建對(duì)象 通過(guò)Object.create() js中對(duì)象分為兩種 函數(shù)對(duì)象 普通對(duì)象 仔細(xì)觀察如下代碼 function Foo(na...

    eccozhou 評(píng)論0 收藏0

  • 關(guān)于javascript的原型和原型鏈，看我就夠了（三）

    摘要：對(duì)于中的引用類型而言，是保存著它們所有實(shí)例方法的真正所在。高級(jí)程序設(shè)計(jì)構(gòu)造函數(shù)陌上寒原型對(duì)象有一個(gè)屬性，指向該原型對(duì)象對(duì)應(yīng)的構(gòu)造函數(shù)為什么有屬性那是因?yàn)槭堑膶?shí)例。 溫故 我們先回顧一下前兩天討論的內(nèi)容 創(chuàng)建對(duì)象的三種方式 通過(guò)對(duì)象直接量 通過(guò)new創(chuàng)建對(duì)象 通過(guò)Object.create() js中對(duì)象分為兩種 函數(shù)對(duì)象 普通對(duì)象 原型對(duì)象prototype 每一個(gè)函數(shù)對(duì)象都...

    joyvw 評(píng)論0 收藏0

  • 關(guān)于JavaScript中訪問(wèn)不帶有this修飾的變量的搜索順序的理解

    摘要：這幾天因?yàn)閷?duì)于中的作用域鏈和原型鏈有點(diǎn)混淆，當(dāng)訪問(wèn)一個(gè)不帶有修飾的變量時(shí)，我想知道它的搜索順序，因?yàn)樽饔糜蜴湹逆溄Y(jié)點(diǎn)也是一個(gè)變量對(duì)象，那么當(dāng)在這個(gè)變量對(duì)象中查找變量時(shí)會(huì)不會(huì)沿著它的原型鏈查找呢這樣就有兩種可能先查找作用域鏈前端的變量對(duì)象，然 這幾天因?yàn)閷?duì)于JavaScript中的作用域鏈和原型鏈有點(diǎn)混淆，當(dāng)訪問(wèn)一個(gè)不帶有this修飾的變量時(shí)，我想知道它的搜索順序，因?yàn)樽饔糜蜴湹逆溄Y(jié)點(diǎn)也...

    jeyhan 評(píng)論0 收藏0

  • 細(xì)說(shuō) Javascript 對(duì)象篇（二） : 原型對(duì)象

    摘要：并沒有類繼承模型，而是使用原型對(duì)象進(jìn)行原型式繼承。我們舉例說(shuō)明原型鏈查找機(jī)制當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性時(shí)，會(huì)從對(duì)象本身開始往上遍歷整個(gè)原型鏈，直到找到對(duì)應(yīng)屬性為止。原始類型有以下五種型。此外，試圖查找一個(gè)不存在屬性時(shí)將會(huì)遍歷整個(gè)原型鏈。 Javascript 并沒有類繼承模型，而是使用原型對(duì)象 prototype 進(jìn)行原型式繼承。 盡管人們經(jīng)常將此看做是 Javascript 的一個(gè)缺點(diǎn)，然...

    lansheng228 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<