理解js中的原型鏈宏侍,prototype與__proto__的關(guān)系

一柬祠、了解創(chuàng)建函數(shù)對象時new的過程。 我們先看一段代碼:

    <script type="text/javascript">
        var Person = function () { };
        var p = new Person();
    </script>
我們可以把new的過程拆分成以下三步:

    <1> var p={}; 初始化一個對象p负芋。

    <2> p.__proto__=Person.prototype;

    <3> Person.call(p);也就是說構(gòu)造p漫蛔,也可以稱之為初始化p。

二旧蛾、 此三步的關(guān)鍵點時是第二步莽龟,以下為證明材料證明一下:

   <script type="text/javascript">
         var Person = function() { };
         var p = new Person();
         alert(p.__proto__ === Person.prototype);
   </script>

1、首先锨天,我們先理解下proto是什么毯盈?

    每個對象都會在其內(nèi)部初始化一個屬性,就是__proto__病袄,當我們訪問一個對象的屬性時搂赋,如果這個對象內(nèi)部不存在這個屬性,那么他就會去__proto__里找這個屬性益缠,這個__proto__又會有自己的__proto__脑奠,一直找下去,這也就是我們平時所說的原型鏈的概念幅慌。
2宋欺、了解proto屬性特點
     按照標準,__proto__是不對外公開的胰伍,也就是說是個私有屬性齿诞,但   是Firefox的引擎將他暴露了出來成為了一個共有的屬性,我們可以對外訪問和設(shè)置骂租。

3祷杈、讓我們看一下下面這些代碼:

   <script type="text/javascript">
          var Person = function () { };
              Person.prototype.Say = function () {
                     alert("Person say");
                 }
          var p = new Person();
              p.Say();
   </script>

那就讓我們看下為什么p可以訪問Person的Say?

首先var p=new Person()渗饮;可以得出p.proto=Person.prototype但汞。那么當我們調(diào)用p.Say()時,首先p中沒有Say這個屬性抽米,于是特占,他就需要到他的proto中去找,也就是Person.prototype云茸,而我們在上面定義了 Person.prototype.Say=function(){}; 于是是目,就找到了這個方法。

4标捺、讓我們看個更復(fù)雜的原型鏈例子懊纳。

   <script type"text/javascript">
          var Person = function () { };
              Person.prototype.Say = function () {
                   alert("Person say");
               }
              Person.prototype.Salary =20000;
          var Programmer = function () { };
              Programmer.prototype = new Person();
              Programmer.prototype.WriteCode = function() {
                   alert("programmer writes code");
              };
              Programmer.prototype.Salary = 10000揉抵;
          var p = new Programmer();
              p.Say();
              p.WriteCode();
              alert(p.Salary)嗤疯;
   </script>

我們來做這樣的推導(dǎo):

var p=new Programmer()可以得出p.proto=Programmer.prototype;

而在上面我們指定了Programmer.prototype=new Person();
我們來這樣拆分冤今,var p1=new Person();Programmer.prototype=p1;
那么:
p1.proto=Person.prototype;
Programmer.prototype.proto=Person.prototype;
根據(jù)上面得到p.proto=Programmer.prototype。
可以得到p.proto.proto=Person.prototype茂缚。

輸出結(jié)果分析:

p.Say()戏罢。由于p沒有Say這個屬性,于是去p.proto也就是Programmer.prototype脚囊,也就是p1中去找由于p1中也沒有Say龟糕,那就去p.proto.proto,也就是
Person.prototype中去找悔耘,于是就找到了alert(“Person say”)的方法讲岁。

其它同理。

三衬以、一幅圖說明它們之間的關(guān)系

Javascript中12個內(nèi)置對象缓艳,其中10個函數(shù)類型,2個對象類型看峻。


Paste_Image.png

上圖有十種構(gòu)造器函數(shù)阶淘,分別為:date Array Number Object Bloolean String Event Error RegExp Function,這些構(gòu)造器函數(shù)都可以通過new來實例化一個對象

注意:

1备籽、所有構(gòu)造器的prototype都是對象(object)類型舶治,只有Function.prototype是函數(shù)(function)類型分井,這是為了保證函數(shù)構(gòu)造器們的__proto__指向的都是函數(shù)车猬。
2、JSON和Math不是構(gòu)造器函數(shù)尺锚,他們是普通的對象珠闰。只有構(gòu)造器函數(shù)才能使用new 關(guān)鍵字實例化一個對象,而JSON和Math已經(jīng)是對象了瘫辩,所以我們可以不用實例化直接使用JSON和Math中的屬性和方法伏嗜。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市伐厌,隨后出現(xiàn)的幾起案子承绸,更是在濱河造成了極大的恐慌,老刑警劉巖挣轨,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件军熏,死亡現(xiàn)場離奇詭異,居然都是意外死亡卷扮,警方通過查閱死者的電腦和手機荡澎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門均践,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人摩幔,你說我怎么就攤上這事彤委。” “怎么了或衡?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵焦影,是天一觀的道長。 經(jīng)常有香客問我封断,道長偷办,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任澄港,我火速辦了婚禮椒涯,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘回梧。我一直安慰自己废岂,他們只是感情好,可當我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布狱意。 她就那樣靜靜地躺著湖苞,像睡著了一般。 火紅的嫁衣襯著肌膚如雪详囤。 梳的紋絲不亂的頭發(fā)上财骨,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天,我揣著相機與錄音藏姐,去河邊找鬼隆箩。 笑死,一個胖子當著我的面吹牛羔杨,可吹牛的內(nèi)容都是我干的捌臊。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼兜材,長吁一口氣:“原來是場噩夢啊……” “哼理澎!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起曙寡,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤糠爬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后举庶,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體执隧,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了殴玛。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捅膘。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖滚粟,靈堂內(nèi)的尸體忽然破棺而出寻仗,到底是詐尸還是另有隱情,我是刑警寧澤凡壤,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布署尤,位于F島的核電站,受9級特大地震影響亚侠,放射性物質(zhì)發(fā)生泄漏曹体。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一硝烂、第九天 我趴在偏房一處隱蔽的房頂上張望箕别。 院中可真熱鬧,春花似錦滞谢、人聲如沸串稀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽母截。三九已至,卻和暖如春橄教,著一層夾襖步出監(jiān)牢的瞬間清寇,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工护蝶, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留华烟,地道東北人。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓滓走,卻偏偏與公主長得像垦江,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子搅方,可洞房花燭夜當晚...
    茶點故事閱讀 44,927評論 2 355

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