關(guān)于JS的__proto__和prototype的案例學(xué)習(xí)

prototype也叫作顯式原型,js里面每個函數(shù)都會有一個prototype屬性攀细,它是一個引用類型,指向的是一個函數(shù)的原型對象。

通過Function.prototype.bind方法構(gòu)造出來的函數(shù)是個例外鹉戚,它沒有prototype屬性。

__proto__叫隱式原型专控,js里面每個對象都會有一個__proto__屬性抹凳,它指向的是創(chuàng)建這個對象的構(gòu)造函數(shù)的prototype。

function A() {
    this.a = "a";

    this.a_func() = function() {
        return this.a;
    }
}

console.log(A.prototype);
console.log(A.__proto__);
A.prototype.b = "b";
var a = new A();
console.log(a.b); // b
a.__proto__.c = "c";
console.log(a.c); // c
console.log(a.__proto__ === A.prototype); // true
console.log(A.prototype.constructor === A); // true

執(zhí)行結(jié)果:

執(zhí)行結(jié)果.png

解釋:

  1. A()是一個函數(shù)伦腐,它擁有prototype屬性赢底,它指向一個函數(shù)的原型對象,在你沒有手動指定A.prototype = new xxx()的時候,它默認(rèn)指向的是A的原型對象幸冻,從結(jié)果中看到粹庞,它是一個Object,里面有著function A()的實例可以共享的屬性和方法
  2. js里面萬物皆對象洽损,F(xiàn)unction是對象庞溜,F(xiàn)unction.prototype也是對象,function A()同樣是對象,它的__proto__指向的是A的構(gòu)造函數(shù)碑定,很明顯它的構(gòu)造函數(shù)是Function()流码,所以A.__proto__ === Function.prototype。
  3. 當(dāng)實例化了一個A的對象a后延刘,a的__proto__指向的就是它的構(gòu)造函數(shù)A的prototype漫试,故 a.__proto__ === A.prototype。
  4. 可以在A的原型對象prototype上添加屬性和方法碘赖,這樣所有的A的實例化對象都可以訪問到這個屬性和方法了
  5. 因為a.__proto__ === A.prototype驾荣,所以在實例a的__proto__上添加屬性和方法是一樣的。
  6. 從結(jié)果中看到普泡,A.prototype也是一個對象秘车,那么它自然就有一個__proto__屬性,這個__proto__指向的是A.prototype的構(gòu)造函數(shù)Object的prototype(原型對象的構(gòu)造函數(shù)都為Object)劫哼,最后規(guī)定Object.prototype.__proto__ === null

所以叮趴,總的來說,我理解的函數(shù)的prototype就是指向一個對象权烧,這個對象含有這個函數(shù)(可以理解成類)的實例可以共享的屬性和方法眯亦;而__proto__就像一條鏈條,連接著所有的prototype與對象之間的關(guān)系般码,每當(dāng)調(diào)用對象的方法的時候妻率,就會先查找當(dāng)前對象有沒有這個方法,如果沒有板祝,就沿著這條__proto__鏈一直往上找宫静,直到找到Object.prototype.__proto__ == null為止。

一個沿著原型鏈查找屬性方法同時也是js類的繼承的例子:

function A() {
    this.a = "showWhere: " + "啊券时,你在A函數(shù)中找到了我孤里!";

    this.showWhere = function() {
        return this.a;
    }
}

A.prototype.xx = "沿著原型鏈自動查找到xx屬性!"

A.prototype.showWhere = function() {
    return "showWhere: " + "啊橘洞,你在A.prototype中找到了我捌袜!"
}

function B() {
    this.showWhere = function() {
        return "showWhere: " + "啊,你在B函數(shù)中找到了我炸枣!";
    }
}
B.prototype = new A();
var b = new B();
console.log(b.a);
console.log(b.showWhere()); // 調(diào)用b對象的showWhere方法
console.log(b.__proto__.showWhere()); // 調(diào)用父類A的showWhere方法
console.log(b.__proto__.__proto__.showWhere());// 調(diào)用A.prototype的showWhere方法
console.log(b.xx);

執(zhí)行結(jié)果:

執(zhí)行結(jié)果.png

一張圖解釋:

鏈圖.png

另補(bǔ)充一點虏等,方法和屬性除了顯示地定義在this對象上(this.xxx=)弄唧,默認(rèn)為定義在原型對象prototype上。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末霍衫,一起剝皮案震驚了整個濱河市候引,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌敦跌,老刑警劉巖澄干,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異峰髓,居然都是意外死亡傻寂,警方通過查閱死者的電腦和手機(jī)息尺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門携兵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人搂誉,你說我怎么就攤上這事徐紧。” “怎么了炭懊?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵并级,是天一觀的道長。 經(jīng)常有香客問我侮腹,道長嘲碧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任父阻,我火速辦了婚禮愈涩,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘加矛。我一直安慰自己履婉,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布斟览。 她就那樣靜靜地躺著毁腿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪苛茂。 梳的紋絲不亂的頭發(fā)上已烤,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天,我揣著相機(jī)與錄音妓羊,去河邊找鬼草戈。 笑死,一個胖子當(dāng)著我的面吹牛侍瑟,可吹牛的內(nèi)容都是我干的唐片。 我是一名探鬼主播丙猬,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼费韭!你這毒婦竟也來了茧球?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤星持,失蹤者是張志新(化名)和其女友劉穎抢埋,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體督暂,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡揪垄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了逻翁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片饥努。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖八回,靈堂內(nèi)的尸體忽然破棺而出酷愧,到底是詐尸還是另有隱情,我是刑警寧澤缠诅,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布溶浴,位于F島的核電站,受9級特大地震影響管引,放射性物質(zhì)發(fā)生泄漏士败。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一褥伴、第九天 我趴在偏房一處隱蔽的房頂上張望谅将。 院中可真熱鬧,春花似錦噩翠、人聲如沸戏自。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽擅笔。三九已至,卻和暖如春屯援,著一層夾襖步出監(jiān)牢的瞬間猛们,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工狞洋, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留弯淘,地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓吉懊,卻偏偏與公主長得像庐橙,于是被迫代替她去往敵國和親假勿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內(nèi)容

  • 特別說明态鳖,為便于查閱转培,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 1,121評論 0 4
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點點福利:阿里云產(chǎn)品券浆竭,享受所有官網(wǎng)優(yōu)惠浸须,并抽取幸運大...
    HetfieldJoe閱讀 2,987評論 4 14
  • 在JavaScript中,原型鏈作為一個基礎(chǔ)邦泄,老生長談删窒,今天我們就來深入的解讀一下原型鏈。 本章主要講的是下面幾點...
    Devinnn閱讀 1,398評論 1 6
  • 文/添一抹嵐 天空飄飄灑灑地散著牛毛細(xì)雨顺囊,如粉如絲肌索。它給遠(yuǎn)山蒙上了一層霧靄,為近處的草木添上了一抹油光包蓝。人若毫無遮...
    添一抹嵐閱讀 597評論 32 19
  • 眼睛疼 嘴巴腫 越想越難過 一個人的北京 空空的床 蕩蕩的房 越來越不懂 期待又遺失的風(fēng)景 說不清 道不明 我企圖...
    關(guān)馨仁閱讀 80評論 0 0