重學JS(十四)—— 一直被忽略的原型鏈

早已認為自己已經(jīng)掌握了原型鏈,直到遇到這幾個問題

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

__proto__倒是經(jīng)常見,但沒有去思考它和prototype的區(qū)別。

概念

對象具有屬性__proto__,可稱為隱式原型,一個對象的隱式原型指向構(gòu)造該對象的構(gòu)造函數(shù)的原型,這也保證了實例能夠訪問到構(gòu)造函數(shù)原型中定義的屬性和方法。
方法(Function)方法這個特殊的對象,除了和其他對象一樣有上述__proto__屬性之外,還有自己特有的屬性——原型屬性(prototype),這個屬性是一個指針,指向一個對象,這個對象的用途就是包含所有實例共享的屬性和方法。

new

上面的理論始終離不開構(gòu)造函數(shù)四個字,不如先看看new 干了什么
1.先創(chuàng)建了一個新的空對象
2.然后讓這個空對象的__proto__指向函數(shù)的原型prototype
3.將對象作為函數(shù)的this傳進去,返回創(chuàng)建的這個對象
看到?jīng)],第二步!將對象的__proto__指向函數(shù)的原型prototype。看文字不清楚的話,用代碼模擬下

function New(Foo){
  const o = new Object(); //創(chuàng)建了一個新的空對象o
  o.__proto__ = Foo.prototype; //讓這個o對象的__proto__指向函數(shù)的原型prototype
  Foo.call(o); //this指向o對象
  return o;
}

所以很明了了,這些問題再也難不倒你

var a = {};
a.__proto__ == Object.prototype;  //a調(diào)用了Object構(gòu)造函數(shù),所以__proto__指向Object.prototype
var b = function(){}
b.__proto__ == Function.prototype  //b調(diào)用了Function構(gòu)造函數(shù),所以__proto__指向Function.prototype
b.__proto__.__proto__ == Object.prototype //Function.prototype是個對象,所以它的__proto__指向Object.prototype
Object.__proto__ == Function.prototype //Object作為一個函數(shù)對象,它的__proto__指向構(gòu)造函數(shù)Function的prototype
Object.prototype.__proto__== null  //Object.prototype是一切的源頭,所以它的__proto__是null。

但是也有小例外

var obj1 = {a:1};
var obj2 = Object.create(obj1);
obj2.__proto__ == Object.prototype   //false
obj2.__proto__  == obj1;  //true

這函數(shù)是用現(xiàn)有對象為原型,即__proto__來創(chuàng)建一個新對象。

原型鏈

有如下代碼

function A(){}
A.prototype.c = 1;
var a = new A();
a.c;  //1

那么它對應(yīng)的原型鏈



a尋找自己的屬性c沒有找到,就順著__proto__找到了A.prototype,它有屬性c,所以a.c的值是1。

總結(jié)

prototype是函數(shù)才有的屬性,class也可以當作構(gòu)造函數(shù),所以它也有。__proto__是每個對象都有的屬性,它指向該對象的構(gòu)造函數(shù)的prototype。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • JS中原型鏈,說簡單也簡單。 首先明確: 函數(shù)(Function)才有prototype屬性,對象(除Object...
    前小白閱讀 4,076評論 0 9
  • 在JavaScript中,原型鏈作為一個基礎(chǔ),老生長談,今天我們就來深入的解讀一下原型鏈。 本章主要講的是下面幾點...
    Devinnn閱讀 1,506評論 1 6
  • 理解 javascript 的原型鏈及繼承 以上所有的運行結(jié)果都是 true; 三種構(gòu)造對象的方法: 通過對象字面...
    你期待的花開閱讀 1,673評論 0 3
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點點福利:阿里云產(chǎn)品券,享受所有官網(wǎng)優(yōu)惠,并抽取幸運大...
    HetfieldJoe閱讀 3,086評論 4 14
  • 情愿做一只鳥兒 不為往事所擾 小小的腦袋 便也是裝不下什么復雜的 余生只剩笑 去哪里都是飛著自由 若是穿到雨里雪里...
    邢若慧閱讀 376評論 0 0

友情鏈接更多精彩內(nèi)容