原型與原型鏈

javascript中的每個(gè)對(duì)象都有一個(gè)內(nèi)置的屬性prototype寸癌,Javascript中對(duì)象的prototype屬性的解釋是:返回對(duì)象類型原型的引用定续。意思是是prototype屬性保存著對(duì)另一個(gè)JavaScript對(duì)象的引用稽寒,這個(gè)對(duì)象作為當(dāng)前對(duì)象的父對(duì)象匿级。

A.prototype = new B();

理解prototype不應(yīng)把它和繼承混淆幸冻。A的prototype為B的一個(gè)實(shí)例空镜,可以理解A將B中的方法和屬性全部克隆了一遍浩淘。A能使用B的方法和屬性。這里強(qiáng)調(diào)的是克隆而不是繼承吴攒≌懦可以出現(xiàn)這種情況:A的prototype是B的實(shí)例,同時(shí)B的prototype也是A的實(shí)例洼怔。

我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)prototype屬性署惯,這個(gè)屬性是一個(gè)指針,指向一個(gè)對(duì)象镣隶,這個(gè)對(duì)象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法极谊。那么什荣,prototype就是通過(guò)調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。

使用原型的好處是可以讓對(duì)象實(shí)例共享它所包含的屬性和方法怀酷。也就是說(shuō)稻爬,不必在構(gòu)造函數(shù)中添加定義對(duì)象信息,而是可以直接將這些信息添加到原型中蜕依。使用構(gòu)造函數(shù)的主要問(wèn)題就是每個(gè)方法都要在每個(gè)實(shí)例中創(chuàng)建一遍桅锄。

在JavaScript中,一共有兩種類型的值,原始值和對(duì)象值。每個(gè)對(duì)象都有一個(gè)內(nèi)部屬性 prototype ,我們通常稱之為原型样眠。原型的值可以是一個(gè)對(duì)象,也可以是null友瘤。如果它的值是一個(gè)對(duì)象,則這個(gè)對(duì)象也一定有自己的原型檐束。這樣就形成了一條線性的鏈辫秧,我們稱之為原型鏈。

含義

函數(shù)可以用來(lái)作為構(gòu)造函數(shù)來(lái)使用被丧。另外只有函數(shù)才有prototype屬性并且可以訪問(wèn)到盟戏,但是對(duì)象實(shí)例不具有該屬性,只有一個(gè)內(nèi)部的不可訪問(wèn)的--proto--屬性甥桂。--proto--是對(duì)象中一個(gè)指向相關(guān)原型的神秘鏈接柿究。按照標(biāo)準(zhǔn),--proto--是不對(duì)外公開(kāi)的黄选,也就是說(shuō)是個(gè)私有屬性蝇摸,但是Firefox的引擎將他暴露了出來(lái)成為了一個(gè)共有的屬性,我們可以對(duì)外訪問(wèn)和設(shè)置办陷。

<script type="text/javascript">
    var Browser = function(){};
    Browser.prototype.run = function(){
        alert("I'm Gecko,a kernel of firefox");
    }
    var Bro = new Browser();
    Bro.run();
</script>

當(dāng)我們調(diào)用Bro.run()方法時(shí)貌夕,由于Bro中沒(méi)有這個(gè)方法,所以民镜,他就會(huì)去他的--proto--中去找啡专,也就是Browser.prototype,所以最終執(zhí)行了該run()方法殃恒。(在這里植旧,函數(shù)首字母大寫(xiě)的都代表構(gòu)造函數(shù),以用來(lái)區(qū)分普通函數(shù))

當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例的時(shí)候离唐,實(shí)例內(nèi)部將包含一個(gè)內(nèi)部指針(--proto--)指向構(gòu)造函數(shù)的prototype,這個(gè)連接存在于實(shí)例和構(gòu)造函數(shù)的prototype之間问窃,而不是實(shí)例與構(gòu)造函數(shù)之間亥鬓。

原型鏈

原型鏈:當(dāng)從一個(gè)對(duì)象那里調(diào)取屬性或方法時(shí),如果該對(duì)象自身不存在這樣的屬性或方法域庇,就會(huì)去自己關(guān)聯(lián)的prototype對(duì)象那里尋找嵌戈,如果prototype沒(méi)有覆积,就會(huì)去prototype關(guān)聯(lián)的前輩prototype那里尋找,如果再?zèng)]有則繼續(xù)查找Prototype.Prototype引用的對(duì)象熟呛,依次類推宽档,直到Prototype.….Prototype為undefined(Object的Prototype就是undefined)從而形成了所謂的“原型鏈”。

--proto--屬性

--ptoto--屬性(IE瀏覽器不支持)是實(shí)例指向原型對(duì)象的一個(gè)指針庵朝,它的作用就是指向構(gòu)造函數(shù)的原型屬性constructor吗冤,通過(guò)這兩個(gè)屬性,就可以訪問(wèn)原型里的屬性和方法了九府。
Javascript中的對(duì)象實(shí)例本質(zhì)上是由一系列的屬性組成的椎瘟,在這些屬性中,有一個(gè)內(nèi)部的不可見(jiàn)的特殊屬性—— --proto--侄旬,該屬性的值指向該對(duì)象實(shí)例的原型肺蔚,一個(gè)對(duì)象實(shí)例只擁有一個(gè)唯一的原型。

<script type="text/javascript">
    function Box(){        //大寫(xiě)儡羔,代表構(gòu)造函數(shù)
        Box.prototype.name = "trigkit4";//原型屬性
        Box.prototype.age = "21";
        Box.prototype.run = function()//原型方法
        {  
            return this.name + this.age + 'studying';
        }
    }
    var box1 = new Box();
    var box2 = new Box();
    alert(box1.constructor);//構(gòu)造屬性宣羊,可以獲取構(gòu)造函數(shù)本身,
                            //作用是被原型指針定位汰蜘,然后得到構(gòu)造函數(shù)本身
</script>  

--proto--屬性和protype屬性的區(qū)別
prototype是function對(duì)象中專有的屬性段只。
--proto--是普通對(duì)象的隱式屬性,在new的時(shí)候鉴扫,會(huì)指向prototype所指的對(duì)象赞枕;
--ptoto--實(shí)際上是某個(gè)實(shí)體對(duì)象的屬性,而prototype則是屬于構(gòu)造函數(shù)的屬性坪创。--ptoto--只能在學(xué)習(xí)或調(diào)試的環(huán)境下使用炕婶。

原型模式的執(zhí)行流程

1.先查找構(gòu)造函數(shù)實(shí)例里的屬性和或方法,如果有莱预,就立即返回柠掂。
2.如果構(gòu)造函數(shù)的實(shí)例沒(méi)有,就去它的原型對(duì)象里找依沮,如果有涯贞,就立即返回。

原型對(duì)象的
<script type="text/javascript">
    function Box(){        //大寫(xiě)危喉,代表構(gòu)造函數(shù)
        Box.prototype.name = "trigkit4";//原型屬性
        Box.prototype.age = "21";
        Box.prototype.run = function()//原型方法
        {  
            return this.name + this.age + 'studying';
        }
    }
    var box1 = new Box();
    alert(box1.name);//trigkit4,原型里的值
    box1.name = "Lee";
    alert(box1.name);//Lee,就進(jìn)原則
    var box2 = new Box();
    alert(box2.name);//trigkit4,原型的值宋渔,沒(méi)有被box1修改
</script>

<script type="text/javascript">
    function Person(){};
    Person.prototype.name = "trigkit4";
    Person.prototype.say = function(){
        alert("Hi");
    }
    var p1 = new Person();//prototype是p1和p2的原型對(duì)象
    var p2 = new Person();//p2為實(shí)例化對(duì)象,其內(nèi)部有一個(gè)__proto__屬性辜限,指向Person的prototype
    console.log(p1.prototype);//undefined,這個(gè)屬性是一個(gè)對(duì)象皇拣,訪問(wèn)不到
    console.log(Person.prototype);//Person
    console.log(Person.prototype.constructor);//原型對(duì)象內(nèi)部也有一個(gè)指針(constructor屬性)指向構(gòu)造函數(shù)
    console.log(p1.__proto__);//這個(gè)屬性是一個(gè)指針指向prototype原型對(duì)象
    p1.say();//實(shí)例可以訪問(wèn)到在原型對(duì)象上定義的屬性和方法
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子氧急,更是在濱河造成了極大的恐慌颗胡,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吩坝,死亡現(xiàn)場(chǎng)離奇詭異毒姨,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)钉寝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)弧呐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人瘩蚪,你說(shuō)我怎么就攤上這事泉懦。” “怎么了疹瘦?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵崩哩,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我言沐,道長(zhǎng)邓嘹,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任险胰,我火速辦了婚禮汹押,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘起便。我一直安慰自己棚贾,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布榆综。 她就那樣靜靜地躺著妙痹,像睡著了一般。 火紅的嫁衣襯著肌膚如雪鼻疮。 梳的紋絲不亂的頭發(fā)上怯伊,一...
    開(kāi)封第一講書(shū)人閱讀 51,165評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音判沟,去河邊找鬼耿芹。 笑死,一個(gè)胖子當(dāng)著我的面吹牛挪哄,可吹牛的內(nèi)容都是我干的吧秕。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼中燥,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼寇甸!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起疗涉,我...
    開(kāi)封第一講書(shū)人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拿霉,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后咱扣,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體绽淘,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年闹伪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了沪铭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡偏瓤,死狀恐怖杀怠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情厅克,我是刑警寧澤赔退,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站证舟,受9級(jí)特大地震影響硕旗,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜女责,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一漆枚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧抵知,春花似錦墙基、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至吱肌,卻和暖如春痘拆,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背氮墨。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工纺蛆, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人规揪。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓桥氏,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親猛铅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子字支,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

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