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

資訊專(zhuān)欄INFORMATION COLUMN

原型與原型鏈

dayday_up / 2084人閱讀

摘要：原型屬性在函數(shù)被定義時(shí)創(chuàng)建，初始值是一個(gè)空對(duì)象沒(méi)有自身屬性的對(duì)象。為新建對(duì)象添加方法和屬性的方式利用原型構(gòu)造器中原型屬性幾個(gè)相關(guān)方法和屬性判斷一個(gè)屬性是自身屬性還是原型屬性。來(lái)自知乎的一張圖，很清晰面向?qū)ο缶幊讨改系脑玩湀D

sync github
原型屬性 prototype

在函數(shù)被定義時(shí)創(chuàng)建，初始值是一個(gè)"空"對(duì)象（沒(méi)有自身屬性的對(duì)象）。

為新建對(duì)象添加方法和屬性的方式

利用原型

// 1 構(gòu)造器中
function Gadget(name, color) {
    this.name = name;
}

// 2 原型屬性
Gadget.prototype.price = 66;
幾個(gè)相關(guān)方法和屬性

hasOwnProperty() 判斷一個(gè)屬性是自身屬性還是原型屬性。

通常，在for in 和 for of 中，需要使用 hasOwnProperty()~

propertyIsEnumerable() 該方法會(huì)對(duì)所有的非內(nèi)建對(duì)象屬性返回 true

const newtoy = new Gadget("webcam");

// 對(duì)于內(nèi)建屬性和方法來(lái)說(shuō)，不可枚舉
newtoy.propertyIsEnumerable("constructor"); // false

// 任何來(lái)自原型鏈中的屬性都會(huì)返回false，包括那些在`for-in`循環(huán)中可枚舉的屬性
newtoy.propertyIsEnumerable("price");   // false

// notice
newtoy.constructor.prototype.propertyIsEnumerable("price"); // true

isPrototypeOf() 判斷當(dāng)前對(duì)象是否是另一個(gè)對(duì)象的原型

Object.getPrototypeOf() ES5適用。獲取對(duì)象的原型。效果同 特殊屬性 __proto__

__proto__

notice: 不要在實(shí)際的腳本中使用。另，__proto__與prototype的區(qū)別，__proto__實(shí)際上是某個(gè)實(shí)例對(duì)象的屬性，而prototype則屬于構(gòu)造器函數(shù)的屬性。
原型陷阱

當(dāng)我們對(duì)原型對(duì)象執(zhí)行完全替換時(shí)，可能會(huì)觸發(fā)原型鏈中某種異常

prototype.constructor屬性是不可靠的

體會(huì)下面的輸出內(nèi)容

function Dog() {
    this.tail = true;
}
var benji = new Dog();
var rusty = new Dog();

Dog.prototype.say = function() {
    return "Woof!";
};

benji.say();    // "Woof!"
rusty.say();    // "Woof!"
benji.constructor === Dog;  // true
rusty.constructor === Dog;  // true

// 用一個(gè)自定義的新對(duì)象完全覆蓋掉原有的原型對(duì)象
Dog.prototype = {
    paws: 4,
    hair: true,
};

// 發(fā)現(xiàn)通過(guò)構(gòu)造函數(shù)創(chuàng)建的對(duì)象 prototype 對(duì)象并沒(méi)有改變
typeof benji.paws;  // undefined
benji.say();    // Woof
typeof benji.__proto__.say; // function
typeof benji.__proto__.paws;    // undefined

// 通過(guò)構(gòu)造函數(shù)創(chuàng)建的對(duì)象使用新的 prototype 對(duì)象
var lucy = new Dog();
lucy.say(); // TypeError: lucy.say is not a function
lucy.paws;  // 4
typeof lucy.__proto__.say; // undefined
typeof lucy.__proto__.paws; // number

//但是！?。∽⒁獯藭r(shí)新對(duì)象的 constructor 屬性的指向
lucy.constructor;   // function Object(){[native code]}
benji.constructor;  // function Dog() {...}

// solve
Dog.prototype.constructor = Dog;
new Dog().constructor === Dog;  // true
lucy.constructor;   // function Dog() {...}
當(dāng)我們重寫(xiě)某對(duì)象的 prototype 時(shí)， 需要重置相應(yīng)的 constructor 屬性。
Summary 
來(lái)自知乎的一張圖，很清晰
Reference

《JavaScript面向?qū)ο缶幊讨改稀?/p>

Javascript的原型鏈圖 - wang z

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

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

相關(guān)文章

  • 《javascript高級(jí)程序設(shè)計(jì)》筆記：原型圖解

    摘要：不理解沒(méi)關(guān)系，下面會(huì)結(jié)合圖例分析上一篇高級(jí)程序設(shè)計(jì)筆記創(chuàng)建對(duì)象下一篇高級(jí)程序設(shè)計(jì)筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對(duì)象與原型鏈繼承與原型鏈 文章直接從原型圖解開(kāi)始的，如果對(duì)一些概念不太清除，可以結(jié)合后面幾節(jié)查看 1. 圖解原型鏈 1.1 鐵三角關(guān)系（重點(diǎn)） function Person() {}; var p = new Person(); showImg(https://s...

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

  • 【5】JavaScript 函數(shù)高級(jí)——原型與原型鏈深入理解（圖解）

    摘要：探索是如何判斷的表達(dá)式如果函數(shù)的顯式原型對(duì)象在對(duì)象的隱式原型鏈上，返回，否則返回是通過(guò)自己產(chǎn)生的實(shí)例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測(cè)試題測(cè)試題報(bào)錯(cuò)對(duì)照下圖理解 原型與原型鏈深入理解（圖解） 原型（prototype） 函數(shù)的 prototype 屬性（圖） 每個(gè)函數(shù)都有一個(gè)prototype屬性，它默認(rèn)指向一個(gè)Object空對(duì)象（即稱(chēng)為：原型對(duì)象） 原型對(duì)象中有...

    馬龍駒 評(píng)論0 收藏0

  • JavaScript中的原型與原型鏈

    摘要：前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過(guò)這個(gè)問(wèn)題。 前言 作為前端高頻面試題之一，相信很多小伙伴都有遇到過(guò)這個(gè)問(wèn)題。那么你是否清楚完整的了解它呢？ 國(guó)際慣例，讓我們先拋出問(wèn)題： 什么是原型、原型鏈 它們有什么特點(diǎn) 它們能做什么 怎么確定它們的關(guān)系 或許你已經(jīng)有答案，或許你開(kāi)始有點(diǎn)疑惑，無(wú)論是 get 新技能或是簡(jiǎn)單的溫習(xí)一次，讓我們一起去探究一番吧 如果文章中有出現(xiàn)紕...

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

  • 進(jìn)擊JavaScript之（四）原型與原型鏈

    摘要：每一個(gè)由構(gòu)造函數(shù)創(chuàng)建的對(duì)象都會(huì)默認(rèn)的連接到該神秘對(duì)象上。在構(gòu)造方法中也具有類(lèi)似的功能，因此也稱(chēng)其為類(lèi)實(shí)例與對(duì)象實(shí)例一般是指某一個(gè)構(gòu)造函數(shù)創(chuàng)建出來(lái)的對(duì)象，我們稱(chēng)為構(gòu)造函數(shù)的實(shí)例實(shí)例就是對(duì)象。表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來(lái)的。 本文您將看到以下內(nèi)容： 傳統(tǒng)構(gòu)造函數(shù)的問(wèn)題 一些相關(guān)概念 認(rèn)識(shí)原型 構(gòu)造、原型、實(shí)例三角結(jié)構(gòu)圖 對(duì)象的原型鏈 函數(shù)的構(gòu)造函數(shù)Function 一句話(huà)說(shuō)明什么...

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

  • 原型鏈一：原型與原型鏈

    摘要：說(shuō)白了，原型就是構(gòu)造函數(shù)用來(lái)構(gòu)造新實(shí)例的模板對(duì)象。什么是原型鏈先回答什么是原型。例如這個(gè)原型的原型就是這個(gè)構(gòu)造函數(shù)的，既這個(gè)原型對(duì)象。這些原型對(duì)象通過(guò)像鏈子一樣連起來(lái)，就叫做原型鏈。 原型鏈初步學(xué)習(xí) 這篇博客只是我初步理解原型鏈的一個(gè)個(gè)人學(xué)習(xí)筆記,寫(xiě)的比較粗略,且有的地方可能理解錯(cuò)誤. 更多更專(zhuān)業(yè)的關(guān)于原型鏈的解釋請(qǐng)看JavaScript深入之從原型到原型鏈和阮一峰的博客:Javas...

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

  • JavaScript系列--淺析原型鏈與繼承

    摘要：綜上所述有原型鏈繼承，構(gòu)造函數(shù)繼承經(jīng)典繼承，組合繼承，寄生繼承，寄生組合繼承五種方法，寄生組合式繼承，集寄生式繼承和組合繼承的優(yōu)點(diǎn)于一身是實(shí)現(xiàn)基于類(lèi)型繼承的最有效方法。 一、前言 繼承是面向?qū)ο螅∣OP）語(yǔ)言中的一個(gè)最為人津津樂(lè)道的概念。許多面對(duì)對(duì)象（OOP）語(yǔ)言都支持兩種繼承方式:：接口繼承 和 實(shí)現(xiàn)繼承 。 接口繼承只繼承方法簽名,而實(shí)現(xiàn)繼承則繼承實(shí)際的方法。由于js中方法沒(méi)有簽名...

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

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

0條評(píng)論

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