淺談JavaScript原型鏈

xumenger 發(fā)布于2019-08-23 14:31 / 2832人閱讀

摘要：在這其中我們就逃不開(kāi)要討論繼承原型對(duì)象構(gòu)造函數(shù)實(shí)例了。想要獲得某一類型的構(gòu)造函數(shù)可以用來(lái)獲得，也可以對(duì)該屬性進(jìn)行賦值操作。三上面就提到一點(diǎn)是指構(gòu)造函數(shù)的原型對(duì)象，它是一個(gè)對(duì)象，它是構(gòu)造函數(shù)的屬性。

原型鏈這一個(gè)話題，需要和很多概念一起講，才能串成一個(gè)比較系統(tǒng)的知識(shí)點(diǎn)。在這其中我們就逃不開(kāi)要討論繼承、原型對(duì)象、構(gòu)造函數(shù)、實(shí)例了。

一、構(gòu)造函數(shù)

構(gòu)造函數(shù)是一類特殊的函數(shù)，它的作用是用來(lái)生成實(shí)例對(duì)象。想要獲得某一類型的構(gòu)造函數(shù)可以用 class.prototype.constructor來(lái)獲得，也可以對(duì)該屬性進(jìn)行賦值操作。
利用構(gòu)造函數(shù)創(chuàng)建實(shí)例要用到new關(guān)鍵字，這個(gè)過(guò)程會(huì)有以下幾步：
a.創(chuàng)建一個(gè)對(duì)象
b.將構(gòu)造函數(shù)中的this指向該對(duì)象的引用
c.執(zhí)行構(gòu)造函數(shù)中的代碼
d.返回該對(duì)象

二、原型對(duì)象（prototype）

在原型鏈中，原型對(duì)象是一個(gè)很關(guān)鍵的點(diǎn)。定義一個(gè)函數(shù)對(duì)象的時(shí)候，會(huì)包含一個(gè)預(yù)定義的原型對(duì)象，即Object的實(shí)例，所以原型對(duì)象是針對(duì)函數(shù)對(duì)象來(lái)講的。

三、prototype vs _proto_

上面就提到一點(diǎn)prototype是指構(gòu)造函數(shù)的原型對(duì)象，它是一個(gè)對(duì)象，它是構(gòu)造函數(shù)的屬性。
而_proto_是一個(gè)實(shí)例對(duì)象的內(nèi)部屬性，用來(lái)指向創(chuàng)建該實(shí)例的函數(shù)對(duì)象的原型對(duì)象。
我們將在第五小節(jié)用代碼更加直觀得明白二者的關(guān)系

四、繼承

在JavaScript中，我們可以用改變構(gòu)造函數(shù)的原型對(duì)象來(lái)實(shí)現(xiàn)繼承。

五、原型鏈

什么時(shí)候會(huì)出現(xiàn)原型鏈：當(dāng)一個(gè)構(gòu)造函數(shù)的原型對(duì)象（prototype）指向另一個(gè)引用類型的實(shí)例，該實(shí)例的構(gòu)造函數(shù)的原型對(duì)象又包含一個(gè)指向另一個(gè)原型的指針。層層遞進(jìn)，就構(gòu)成了實(shí)例與原型的鏈條。這也就是形成原型鏈的基本思路。
說(shuō)個(gè)通俗的例子：

//父親類構(gòu)造函數(shù)
  function Father(){
    this.FProp = "father";
  }
  Father.prototype.FCall = function(){
    console.log(JSON.stringify(this)+" is calling father"s function");
  }

  //兒子類構(gòu)造函數(shù)
  function Son(){
    this.SProp = "son";
  }

  Son.prototype.SCall = function(){
    console.log("I"m a son");
  }

  //通過(guò)原型繼承
  //注意上面的SCall()會(huì)失效，因?yàn)橛昧死^承，prototype中的方法和constructor被重寫(xiě)
  Son.prototype = new Father();
  Son.prototype.constructor =  Son;

  //生成實(shí)例對(duì)象
  var newInstance = function(){
    var tom = new Son();
    tom.FCall();
    console.log(tom.FProp);
    //tom.SCall(); 控制臺(tái)會(huì)報(bào)undefined錯(cuò)誤
    console.log(tom.SProp);

    console.log(Son.prototype.constructor);
  }

代碼結(jié)果：
可以看出子類繼承了父類之后，可以獲取父類的屬性和方法。

  var getDifference = function(){
    var tom = new Son();
    console.log(Son.prototype); 
    console.log(tom.__proto__);
    console.log(tom.prototype);   
  }

代碼結(jié)果：
對(duì)象實(shí)例獲取prototype的結(jié)果是undefined