原型及原型鏈

什么是原型

js中的原型指的是一個對象可以從另一個對象繼承特性吝羞。每個對象都有一個原型對象凉翻,對象以其原型對象為模板筐咧,繼承其屬性,方法噪矛。原型對象也有自己的原型對象量蕊,這樣一層一層,通常稱為原型鏈艇挨。

準(zhǔn)確來說残炮,這些屬性和方法,定義在對象的構(gòu)造函數(shù)(constructor functions)之上的prototype屬性上面缩滨,而不是對象實(shí)例本身势就。

js中鏈接對象實(shí)例和原型的是_proto_,它是從構(gòu)造函數(shù)的prototype派生的泉瞻,之后上溯到原型鏈,在構(gòu)造器中找到這些屬性和方法苞冯。

js中不是所有的對象都可以作為原型對象袖牙,每個對象都是繼承自O(shè)bject,但是我們主動設(shè)置一個對象的原型為另一個對象舅锄。

prototype屬性

繼承的屬性和方法被定義在prototype屬性上鞭达,prototype屬性的值是一個對象。

constructor屬性

每個實(shí)例對象都從原型中繼承了一個constructor屬性皇忿,該屬性指向了用于構(gòu)造此實(shí)例對象的構(gòu)造函數(shù)畴蹭。


構(gòu)造函數(shù),原型鳍烁,實(shí)例之間的關(guān)系


下面我們將通過一些例子來看一下

    //構(gòu)造函數(shù)1
    function Person( name,age ){
      this.name = name;
      this.age = age;
    };
    //構(gòu)造函數(shù)2
    function Test (){

    }
    //實(shí)例1
    var person1 = new Person("小明", 21);
    //原型鏈為: person1 ====> Person  ====> Object ====> null

    console.log(person1.constructor);
    /*output:
    person1.constructor指向構(gòu)造函數(shù)Person
    ? Person(name, age) {
      this.name = name;
      this.age = age;
    }
    */
    console.log(person1.__proto__);
    console.log(Person.prototype);
    /*output:
    {
      constructor: ? Person(name, age)
      __proto__: Object
    }
     */
    console.log(person1.__proto__ === Person.prototype); //true
  
    //實(shí)例2叨襟;
    var person2 = new Test();
    //把實(shí)例person1作為person2的原型
    person2.__proto__ = person1;
    //原型鏈為: person2 ====> person1 ===> Person ===> Object ====>null
    console.log(person2.name) //小明,繼承自person1
    console.log(person2.constructor);
    /*output:
    ? Person(name, age) {
      this.name = name;
      this.age = age;
    }
    */
    console.log(person2.__proto__);
    /*output:
    {
    Person 
      age: 21
      name: "小明"
      __proto__:
      {
      constructor: ? Person(name, age)
      __proto__: Object
      }
    }
     */
    console.log(person2.__proto__.__proto__ === Person.prototype); //true

    //實(shí)例3
    //create() 實(shí)際做的是從指定原型對象創(chuàng)建一個新的對象幔荒。這里以 person1 為原型對象創(chuàng)建了 person3 對象糊闽。
    var person3 = Object.create(person1);
    //原型鏈為: person3 ====> person1 ===> Person ===> Object ====>null

    console.log(person3.__proto__);
    /*output:
    {
    Person 
      age: 21
      name: "小明"
      __proto__:
      {
      constructor: ? Person(name, age)
      __proto__: Object
      }
    }
     */

不改變對象的原型鏈繼承另一個對象的方法

    //構(gòu)造函數(shù)1
    function Person( name,age ){
      this.name = name;
      this.age = age;
    };
    //構(gòu)造函數(shù)2
    function Test (){

    }

    //方法一:
    var person4 = new Test();
    //用call或者apply來改變this,在person4的作用域里面去執(zhí)行Person
    //Person.call(person4);
    Person.apply(person4);
    console.log(person4.__proto__);
    /*
    constructor: ? Test()
    __proto__: Object
    */

  //方法二: 可以直接在構(gòu)造函數(shù)里面使用apply或者call
  //比如:
  function Test (){
    Person.call(this);
  }


四個拓展原型鏈的方法

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#%E6%80%BB%E7%BB%93%EF%BC%9A4_%E4%B8%AA%E7%94%A8%E4%BA%8E%E6%8B%93%E5%B1%95%E5%8E%9F%E5%9E%8B%E9%93%BE%E7%9A%84%E6%96%B9%E6%B3%95


new操作符做了什么事情

//new 的過程
var obj = new Object(); //創(chuàng)建一個新對象
obj.__proto__ = A.prototype;  //讓obj的__proto__指向A.prototype
A.call(obj)   //在obj的作用環(huán)境執(zhí)行構(gòu)造函數(shù)的代碼,使this指向obj
return obj    //返回實(shí)例對象
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末爹梁,一起剝皮案震驚了整個濱河市右犹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌卫键,老刑警劉巖傀履,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件虱朵,死亡現(xiàn)場離奇詭異莉炉,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)碴犬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進(jìn)店門絮宁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人服协,你說我怎么就攤上這事绍昂。” “怎么了偿荷?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵窘游,是天一觀的道長。 經(jīng)常有香客問我跳纳,道長忍饰,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任寺庄,我火速辦了婚禮艾蓝,結(jié)果婚禮上力崇,老公的妹妹穿的比我還像新娘。我一直安慰自己赢织,他們只是感情好亮靴,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著于置,像睡著了一般茧吊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上俱两,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天饱狂,我揣著相機(jī)與錄音,去河邊找鬼宪彩。 笑死休讳,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的尿孔。 我是一名探鬼主播俊柔,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼活合!你這毒婦竟也來了雏婶?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤白指,失蹤者是張志新(化名)和其女友劉穎留晚,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體告嘲,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡错维,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了橄唬。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赋焕。...
    茶點(diǎn)故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖仰楚,靈堂內(nèi)的尸體忽然破棺而出隆判,到底是詐尸還是另有隱情,我是刑警寧澤僧界,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布侨嘀,位于F島的核電站,受9級特大地震影響捂襟,放射性物質(zhì)發(fā)生泄漏咬腕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一笆豁、第九天 我趴在偏房一處隱蔽的房頂上張望郎汪。 院中可真熱鬧赤赊,春花似錦、人聲如沸煞赢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽照筑。三九已至吹截,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間凝危,已是汗流浹背波俄。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蛾默,地道東北人懦铺。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像支鸡,于是被迫代替她去往敵國和親冬念。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評論 2 355

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