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

資訊專欄INFORMATION COLUMN

原型與原型鏈理解

YJNldm / 2109人閱讀

原型與原型鏈理解 1. 什么是原型

JavaScript是一種簡(jiǎn)易的腳本語(yǔ)言，其是由對(duì)象構(gòu)成。每一個(gè)JavaScript對(duì)象（除null外）都和另一個(gè)對(duì)象相關(guān)聯(lián)，“另一個(gè)”對(duì)象就是原型。也就是說，任何一個(gè)對(duì)象都有原型這個(gè)屬性。

隱式原型（_proto_）：上面說的這個(gè)原型是JavaScript中的內(nèi)置屬性[[prototype]]，此屬性繼承自object對(duì)象，在腳本中沒有標(biāo)準(zhǔn)的方式訪問[[prototype]]，但Firefox、Safari和Chrome在每個(gè)對(duì)象上都支持一個(gè)屬性_proto_。隱式原型的作用是用來構(gòu)成原型鏈，實(shí)現(xiàn)基于原型的繼承

顯示原型（prototype）：每一個(gè)函數(shù)在創(chuàng)建之后，便會(huì)擁有一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。顯示原型的作用是用來實(shí)現(xiàn)基于原型的繼承與屬性的共享

2. 那原型是用來做什么的？其可以解決什么問題？

構(gòu)造函數(shù)的缺陷：
構(gòu)造函數(shù)是通過new運(yùn)算符創(chuàng)建并初始化一個(gè)新的對(duì)象，關(guān)鍵字new后跟隨一個(gè)函數(shù)調(diào)用，這個(gè)函數(shù)稱為構(gòu)造函數(shù)，構(gòu)造函數(shù)用來初始化一個(gè)新創(chuàng)建的對(duì)象。
現(xiàn)在有一個(gè)Person的構(gòu)造函數(shù)，表示人對(duì)象的原型

function Person(name) {
    this.name = name 
    this.address = "上海" // 設(shè)置一個(gè)實(shí)例對(duì)象的共有屬性address
}

//生成人對(duì)象實(shí)例
var person1 = new Person("Tom")
var person2 = new Person("Jack")

這兩個(gè)對(duì)象的address屬性是獨(dú)立的，修改其中一個(gè)，不會(huì)影響到另一個(gè)

person1.address = "北京"
console.log(person2.address) // 上海,不受person1的影響

每一個(gè)實(shí)例對(duì)象都有自己的屬性和方法的副本，由于無法做到數(shù)據(jù)共享，導(dǎo)致資源的浪費(fèi)。所以，為了解決數(shù)據(jù)無法共享的問題，引入了prototype屬性，prototype屬性是一個(gè)指針，指向一個(gè)對(duì)象，而這個(gè)對(duì)象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法，也就是說prototype是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。因此我們可以將實(shí)例對(duì)象需要共享的屬性和方法都放在這個(gè)對(duì)象中。
現(xiàn)在對(duì)上面的Person方法進(jìn)行重寫，假設(shè)我們需要address這個(gè)屬性是共享的，但是name是獨(dú)有的。

function Person(name) {
    this.name = name 
}
Person.prototype = {
    address: "上海"
}

//生成人對(duì)象實(shí)例
var person1 = new Person("Tom")
var person2 = new Person("Jack")

//修改共享的屬性address
Person.prototype.address = "北京"
console.log(person1.prototype) // 北京
console.log(person2.prototype) // 北京

address屬性放在了Person的prototype對(duì)象中，創(chuàng)建實(shí)例后，兩個(gè)實(shí)例也將address屬性放在了原型對(duì)象中，這兩個(gè)實(shí)例對(duì)象共享這個(gè)屬性，只要修改Person中的prototype對(duì)象，就會(huì)同時(shí)影響兩個(gè)實(shí)例對(duì)象

繼承機(jī)制
我們都知道JavaScript里面都是對(duì)象，如果想要讓所有的對(duì)象聯(lián)系起來，就需要有一種繼承機(jī)制來實(shí)現(xiàn)。上面的例子中說了實(shí)例中原型的作用，就是實(shí)現(xiàn)共享屬性和方法，但是如果想要讓其他引用類型也共享這個(gè)引用類型的屬性和方法呢？假如我們讓原型對(duì)象等于另一個(gè)類型的實(shí)例，此時(shí)的原型對(duì)象將包含一個(gè)指向另一個(gè)原型的指針，相應(yīng)地，另一個(gè)原型中也包含著一個(gè)指向另一個(gè)構(gòu)造函數(shù)的指針。假如另一個(gè)原型又是另一個(gè)類型的實(shí)例，且關(guān)系依然成立，如此層層遞進(jìn)，就構(gòu)成了實(shí)例與原型的鏈條。
實(shí)現(xiàn)原型鏈的基本模式

//原型鏈
function SuperType() {
    this.property = true 
}
SuperType.prototype.getSuperValue = function(){
    return this.property
}
function SubType () {
    this.subproperty = false
}
//繼承了SubType
SubType.prototype = new SuperType()
SubType.prototype.getSubValue = function () {
    return this.subproperty
}
var instance = new SubType()
console.log(instance.getSuperValue())

首先先定義了兩個(gè)類型：SuperType和SubType，每個(gè)類型分別有一個(gè)屬性和方法，通過創(chuàng)建SuperType實(shí)例讓SubType繼承SuperType，并且將SuperType實(shí)例賦值給SubType.prototype。這樣就將原來存放在SuperType的實(shí)例中的所有屬性和方法共享到SubType.prototype中。
然后再給SubType.prototype添加一個(gè)方法，這樣就在繼承了SuperType的屬性和方法的基礎(chǔ)上又添加了一個(gè)新方法。

最終結(jié)果如圖上所示，instance指向SubType的原型，SubType的原型又指向SuperType的原型。getSuperValue()方法仍然還在SuperType.prototype中，但peoperty則位于SubType.prototype中。這是因?yàn)閜roperty是一個(gè)實(shí)例屬性，而getSuperValue()這是一個(gè)原型方法。對(duì)于原型鏈的繼承是如何進(jìn)行的呢？

這就需要介紹一些原型搜索機(jī)制，原型搜索機(jī)制是當(dāng)使用讀取模式訪問一個(gè)屬性時(shí)，首先會(huì)在實(shí)例中搜索該屬性，如果沒有找到該屬性，接著就會(huì)繼續(xù)搜索實(shí)例的原型。 在通過原型鏈實(shí)現(xiàn)繼承的情況下，搜索過程就得以沿著原型鏈繼續(xù)向上。就拿上面的例子來說，調(diào)用instance.getSuperValue()會(huì)經(jīng)歷三個(gè)搜索步驟：

   1). 搜索實(shí)例   
   2). 搜索SubTyp.prototype   
   3). 搜索SuperType.prototype，最后一步才會(huì)找到該方法

在找不到屬性或方法的時(shí)的情況下，搜索過程總是要一環(huán)一環(huán)地前行到原型鏈的末端才會(huì)停下來。

總結(jié)

JavaScript的原型是為了實(shí)現(xiàn)對(duì)象間的聯(lián)系，解決構(gòu)造函數(shù)無法數(shù)據(jù)共享而引入的一個(gè)屬性。而原型鏈?zhǔn)且粋€(gè)實(shí)現(xiàn)對(duì)象間聯(lián)系即繼承的主要方法。

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

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

相關(guān)文章

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

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

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

  • 理解javaScript原型、原型鏈

    摘要：構(gòu)造函數(shù)的屬性指向原型對(duì)象原型對(duì)象的屬性指向構(gòu)造函數(shù)實(shí)例對(duì)象的指向原型對(duì)象所有引用類型默認(rèn)都繼承了，而這個(gè)繼承也是通過原型鏈實(shí)現(xiàn)的。第一種方式是使用操作符，只要用這個(gè)操作符來測(cè)試實(shí)例與原型鏈中出現(xiàn)過的構(gòu)造函數(shù)，結(jié)果就會(huì)返回。 理解對(duì)象 首先對(duì)象的定義是:無序?qū)傩缘募?，其屬性可以包含基本值、?duì)象或者函數(shù)。嚴(yán)格來講，這就相當(dāng)于說對(duì)象是一組沒有特定順序的值。對(duì)象的每個(gè)屬性或方法都有一個(gè)名...

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

  • 你是否理解js的Object與Function與原型鏈

    摘要：原型對(duì)象是由創(chuàng)建的，因此原型對(duì)象的構(gòu)造函數(shù)是構(gòu)造函數(shù)也可以是稱為對(duì)象，原型對(duì)象也就繼承了其生父構(gòu)造函數(shù)中的數(shù)據(jù)，也同時(shí)繼承了原型對(duì)象的數(shù)據(jù)。當(dāng)然這條原型鏈中的數(shù)據(jù)，會(huì)被還是還是這類構(gòu)造函數(shù)繼承，但是不會(huì)被這些繼承，他們不處于同一個(gè)鏈條上。 js中，F(xiàn)unction的本質(zhì)是什么？Object的本質(zhì)又是什么？js中有幾條原型鏈？ showImg(https://segmentfault.c...

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

  • 理解js的原型與繼承

    摘要：相當(dāng)于在用原型繼承編寫復(fù)雜代碼前理解原型繼承模型十分重要。同時(shí)，還要清楚代碼中原型鏈的長(zhǎng)度，并在必要時(shí)結(jié)束原型鏈，以避免可能存在的性能問題。 js是一門動(dòng)態(tài)語(yǔ)言,js沒有類的概念,ES6 新增了class 關(guān)鍵字，但只是語(yǔ)法糖，JavaScript 仍舊是基于原型。 至于繼承,js的繼承與java這種傳統(tǒng)的繼承不一樣.js是基于原型鏈的繼承. 在javascript里面,每個(gè)對(duì)象都有一...

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

  • 深入理解 js 之繼承與原型鏈

    摘要：原型鏈與繼承當(dāng)談到繼承時(shí)，只有一種結(jié)構(gòu)對(duì)象。如果對(duì)該圖不怎么理解，不要著急，繼續(xù)往下看基于原型鏈的繼承對(duì)象是動(dòng)態(tài)的屬性包指其自己的屬性。當(dāng)使用操作符來作用這個(gè)函數(shù)時(shí)，它就可以被稱為構(gòu)造方法構(gòu)造函數(shù)。 原型鏈與繼承 當(dāng)談到繼承時(shí)，JavaScript 只有一種結(jié)構(gòu)：對(duì)象。每個(gè)實(shí)例對(duì)象（object ）都有一個(gè)私有屬性（稱之為proto）指向它的原型對(duì)象（prototype）。該原型對(duì)象也...

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

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

0條評(píng)論

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