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

資訊專欄INFORMATION COLUMN

這樣理解原型與原型鏈比較簡(jiǎn)單

csRyan / 3472人閱讀

摘要：屬性這是每個(gè)對(duì)象都有的隱式原型屬性，指向了創(chuàng)建該對(duì)象的構(gòu)造函數(shù)的原型。

原型

在JavaScript中，有兩個(gè)原型，分別是 prototype 和 _proto_
注：在ECMA-262第5版中管這個(gè) _proto_ 叫 [[Prototype]]

prototype 屬性：
這是一個(gè)顯式原型屬性，只有函數(shù)才擁有該屬性。
_proto_ 屬性：
這是每個(gè)對(duì)象都有的隱式原型屬性，指向了創(chuàng)建該對(duì)象的構(gòu)造函數(shù)的原型。

什么是函數(shù)？什么是對(duì)象？

創(chuàng)建函數(shù)有兩種方式：
①、通過 function 關(guān)鍵字定義
②、通過 new Function
其中函數(shù)又可以分為普通函數(shù)和構(gòu)造函數(shù)，兩者唯一的區(qū)別就是調(diào)用的方式不同，語(yǔ)法上沒有差異

function normalFn(){}   // 普通函數(shù)(函數(shù)名首字母小寫)
function StructFn(){}   // 構(gòu)造函數(shù)(函數(shù)名首字母大寫)

創(chuàng)建對(duì)象的方式多種多樣，其中傳統(tǒng)方法是通過構(gòu)造函數(shù)來創(chuàng)建對(duì)象，使用 new 關(guān)鍵字即可創(chuàng)建，創(chuàng)建出來的對(duì)象實(shí)例可通過 constructor 來訪問構(gòu)造函數(shù)

let obj = new StructFn()  // obj就是一個(gè)對(duì)象
console.log(obj.constructor) // function normalFn(){}

在JS中，萬(wàn)物都是對(duì)象，函數(shù)也屬于對(duì)象，只不過函數(shù)相對(duì)于對(duì)象有著更為精確的定義

原型初探

為了證明 prototype屬性 是函數(shù)獨(dú)有，而__proto__是每個(gè)對(duì)象都有的，我們可以測(cè)試以下代碼：

function a(){}
console.log(a.prototype);    // {constructor: ?}
console.log(a.__proto__);    // ? () { [native code] }

let obj = new Object()
console.log(obj.prototype)  // undefined
console.log(obj.__proto__)  // {constructor: ?, __defineGetter__: ?, ?…}

可以看到對(duì)象的 顯式原型(prototype)為undefined

*注意：
undefined 和 null 同屬于對(duì)象，但是它們都沒有原型，為什么？ 在JavaScript中，目前只有兩個(gè)只有一個(gè)值的數(shù)據(jù)類型，那就是 undefined 和 null*
由于這兩種數(shù)據(jù)類型有且只有一個(gè)值，并且沒有方法，所以自然而然就沒有原型了。
有的同學(xué)會(huì)問，那NaN呢？NaN是屬于Number數(shù)據(jù)類型的，屬于對(duì)象，只有_proto_ 屬性
console.log(undefined.__proto__);  // 報(bào)錯(cuò)：Uncaught TypeError: Cannot read property "__proto__" of undefined
console.log(null.__proto__);       // 報(bào)錯(cuò)：Uncaught TypeError: Cannot read property "__proto__" of null
console.log(NaN.__proto__) ;       // Number?{0, constructor: ?, toExponential: ?, ?…}
構(gòu)造函數(shù)創(chuàng)建對(duì)象，其中發(fā)生什么？ 
1.創(chuàng)建了一個(gè)新對(duì)象
2.將新創(chuàng)建的對(duì)象的隱式原型指向其構(gòu)造函數(shù)的顯式原型。
3.將this指向這個(gè)新對(duì)象
4.返回新對(duì)象

注意看第二條：將新創(chuàng)建的對(duì)象的隱式原型指向其構(gòu)造函數(shù)的顯式原型
也就是說 對(duì)象.__prototype === 構(gòu)造函數(shù).prototype

function fn(){}
let obj = new fn();
console.log(obj.__proto__ === fn.prototype);  // true

那么這樣，我們?cè)跒闃?gòu)造函數(shù)添加原型方法時(shí)，就可以通過兩種方法取訪問了

fn.prototype.more = function(){console.log("fn-prototype-more")}

// 1、通過構(gòu)造函數(shù)的顯式原型
fn.prototype.more()

// 2、通過對(duì)象的隱式原型
obj.__proto__.more()
原型鏈

原型鏈：實(shí)例與原型之間的鏈接

先來看一個(gè)例子：

function Abc(){}
Abc.prototype.fn = function(){console.log("Abc-prototype-fn")};
let obj = new Abc()
obj.fn() // Abc-prototype-fn

從上面的代碼我們可以看到。構(gòu)造函數(shù) Abc 和對(duì)象實(shí)例 obj 都沒有fn這個(gè)方法，之所以對(duì)象obj能夠訪問到Abc的原型方法，是通過原型鏈來尋找，借用了 _proto_ 這個(gè)屬性

所以以下的代碼也是等價(jià)的

obj.fn()             // Abc-prototype-fn
obj.__proto__.fn()   // Abc-prototype-fn

再來看一個(gè)復(fù)雜的例子：

function Abc(){
    this.fn = function(){console.log("Abc-fn")};
}
Abc.prototype.fn = function(){console.log("Abc-prototype-fn")};
Object.prototype.fn = function(){console.log("Object-fn")};

let obj = new Abc()
obj.fn = function(){console.log("obj-fn")};
obj.fn()

這里有4個(gè)重名的fn函數(shù)，分別是：
①、實(shí)例對(duì)象obj的方法
②、構(gòu)造函數(shù)Abc的方法
③、構(gòu)造函數(shù)Abc原型上的方法
④、Obecjt對(duì)象原型上的方法

為了表示方法的尋找過程，我畫了一幅很丑陋的圖，大家不要介意哈！

在尋找某個(gè)方法或者屬性的時(shí)候，會(huì)先從自身對(duì)象尋找；
如果沒有，則會(huì)去構(gòu)造函數(shù)尋找；注意這里還沒用到原型鏈；
緊接著，會(huì)到構(gòu)造函數(shù)的原型上尋找，此時(shí)就是對(duì)象Abc通過 _proto_ 屬性進(jìn)行尋找
接下來，會(huì)到Object對(duì)象的原型尋找，Object對(duì)象是所有對(duì)象之父，可以說所有的對(duì)象都繼承了Object，此時(shí)構(gòu)造函數(shù)通過_proto_ 屬性找到了Object的prototype
最后的最后，由于Object._proto_ 指向了null，這也就是原型鏈的末端


第一道原型鏈?zhǔn)?obj._proto_ ,訪問到了Abc的prototype

console.log(obj.__proto__ === Abc.prototype)  // true

第二道原型鏈?zhǔn)?obj.__proto__.__proto__ ,訪問到了Object的prototype

console.log(obj.__proto__.__proto__ === Object.prototype) //true

第三道原型鏈?zhǔn)?obj.__proto__.__proto__.__proto__ 訪問到了Object的prototype.__proto__,，最后指向了null

console.log(obj.__proto__.__proto__.__proto__ === null) //true

這樣我們就可以看到了整個(gè)原型鏈的流程了

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

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

相關(guān)文章

  • 詳解js中的繼承（二）

    摘要：寄生組合式繼承終于寫到最后一個(gè)繼承了，我們?cè)谥爸v了種繼承方式，分別是原型鏈，借用構(gòu)造函數(shù)繼承，組合繼承，原型式繼承，寄生式繼承，其中，前三種聯(lián)系比較緊密，后面兩種也比較緊密，而我們要講的最后一種，是和組合繼承還有寄生式繼承有關(guān)系的。 前言 趁周末結(jié)束之前趕緊先把坑填上。上回我們說到了原型鏈，并且留下了幾個(gè)思考題，先把答案公布一下。 在最后一個(gè)例子里，console.log(b1.c...

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

  • 前端基礎(chǔ)進(jìn)階（九）：詳解面向?qū)ο?、?gòu)造函數(shù)、原型與原型鏈

    摘要：我們通過一個(gè)簡(jiǎn)單的例子與圖示，來了解構(gòu)造函數(shù)，實(shí)例與原型三者之間的關(guān)系。而原型對(duì)象的指向構(gòu)造函數(shù)。于是根據(jù)構(gòu)造函數(shù)與原型的特性，我們就可以將在構(gòu)造函數(shù)中，通過聲明的屬性與方法稱為私有變量與方法，它們被當(dāng)前被某一個(gè)實(shí)例對(duì)象所獨(dú)有。 showImg(https://segmentfault.com/img/remote/1460000008593382); 如果要我總結(jié)一下學(xué)習(xí)前端以來我遇...

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

  • 我所認(rèn)識(shí)的JavaScript作用域鏈和原型鏈

    摘要：為了防止之后自己又開始模糊，所以自己來總結(jié)一下中關(guān)于作用域鏈和原型鏈的知識(shí)，并將二者相比較看待進(jìn)一步加深理解。因此我們發(fā)現(xiàn)當(dāng)多個(gè)作用域相互嵌套的時(shí)候，就形成了作用域鏈。原型鏈原型說完了作用域鏈，我們來講講原型鏈。 　　畢業(yè)也整整一年了，看著很多學(xué)弟都畢業(yè)了，忽然心中頗有感慨，時(shí)間一去不復(fù)還呀。記得從去年這個(gè)時(shí)候接觸到JavaScript,從一開始就很喜歡這門語(yǔ)言，當(dāng)時(shí)迷迷糊糊看完了《J...

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

  • 深入學(xué)習(xí)js之——原型和原型鏈

    摘要：我們用一張圖表示構(gòu)造函數(shù)和實(shí)例原型之間的關(guān)系好了構(gòu)造函數(shù)和實(shí)例原型之間的關(guān)系我們已經(jīng)梳理清楚了，那我們?cè)趺幢硎緦?shí)例與實(shí)例原型，也就是或者和之間的關(guān)系呢。 開篇： 在Brendan Eich大神為JavaScript設(shè)計(jì)面向?qū)ο笙到y(tǒng)的時(shí)候，借鑒了Self 和Smalltalk這兩門基于原型的語(yǔ)言，之所以選擇基于原型的面向?qū)ο笙到y(tǒng)，并不是因?yàn)闀r(shí)間匆忙，它設(shè)計(jì)起來相對(duì)簡(jiǎn)單，而是因?yàn)閺囊婚_始B...

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

  • 深入學(xué)習(xí)js之——原型和原型鏈

    摘要：我們用一張圖表示構(gòu)造函數(shù)和實(shí)例原型之間的關(guān)系好了構(gòu)造函數(shù)和實(shí)例原型之間的關(guān)系我們已經(jīng)梳理清楚了，那我們?cè)趺幢硎緦?shí)例與實(shí)例原型，也就是或者和之間的關(guān)系呢。 開篇： 在Brendan Eich大神為JavaScript設(shè)計(jì)面向?qū)ο笙到y(tǒng)的時(shí)候，借鑒了Self 和Smalltalk這兩門基于原型的語(yǔ)言，之所以選擇基于原型的面向?qū)ο笙到y(tǒng)，并不是因?yàn)闀r(shí)間匆忙，它設(shè)計(jì)起來相對(duì)簡(jiǎn)單，而是因?yàn)閺囊婚_始B...

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

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

0條評(píng)論

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