js原型、原型鏈、繼承的理解

一、原型、原型鏈

原型是Javascript中的繼承的基礎(chǔ)，JavaScript的繼承主要依靠原型鏈來實(shí)現(xiàn)的。

原型

? 在JavaScript中，我們創(chuàng)建一個(gè)函數(shù)A(就是聲明一個(gè)函數(shù)), 就會(huì)為該函數(shù)創(chuàng)建一個(gè)prototype屬性。而且也會(huì)在內(nèi)存中創(chuàng)建一個(gè)對(duì)象B，A函數(shù)的屬性 prototype 指向這個(gè)對(duì)象B( 即：prototype的屬性的值是這個(gè)對(duì)象 )。這個(gè)對(duì)象B就是函數(shù)A的原型對(duì)象，簡稱函數(shù)的原型。這個(gè)原型對(duì)象B 默認(rèn)會(huì)有一個(gè)屬性 constructor， constructor屬性指向函數(shù)A ( 意思就是說：constructor屬性的值是函數(shù)A )。

?看下面的代碼：

<body>
    <script type="text/javascript">
        /*
            聲明一個(gè)函數(shù)，則這個(gè)函數(shù)默認(rèn)會(huì)有一個(gè)屬性叫 prototype 。而且瀏覽器會(huì)自動(dòng)按照一定的規(guī)則
            創(chuàng)建一個(gè)對(duì)象，這個(gè)對(duì)象就是這個(gè)函數(shù)的原型對(duì)象，prototype屬性指向這個(gè)原型對(duì)象。這個(gè)原型對(duì)象
            有一個(gè)屬性叫constructor 執(zhí)行了這個(gè)函數(shù)
            
            注意：原型對(duì)象默認(rèn)只有屬性：constructor。其他都是從Object繼承而來，暫且不用考慮。
        */
        function Person () {
            
        }       
    </script>
</body>

下面的圖描述了聲明一個(gè)函數(shù)之后發(fā)生的事情：


image.png

當(dāng)把一個(gè)函數(shù)作為構(gòu)造函數(shù) (理論上任何函數(shù)都可以作為構(gòu)造函數(shù)) 使用new創(chuàng)建對(duì)象的時(shí)候，那么這個(gè)對(duì)象就會(huì)存在一個(gè)默認(rèn)的不可見的屬性，來指向了構(gòu)造函數(shù)的原型對(duì)象。 這個(gè)不可見的屬性我們一般用 [[prototype]] 來表示，只是這個(gè)屬性沒有辦法直接訪問到。

看下面的代碼：

<body>
    <script type="text/javascript">
        function Person () {
            
        }   
        /*
            利用構(gòu)造函數(shù)創(chuàng)建一個(gè)對(duì)象，則這個(gè)對(duì)象會(huì)自動(dòng)添加一個(gè)不可見的屬性 [[prototype]], 而且這個(gè)屬性
            指向了構(gòu)造函數(shù)的原型對(duì)象。
        */
        var p1 = new Person();
    </script>
</body>

觀察下面的示意圖：


image.png

原型鏈

每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象，原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含一個(gè)指向原型對(duì)象的內(nèi)部指針。假如讓一個(gè)原型對(duì)象等于另一個(gè)類型的實(shí)例，那么此時(shí)的原型對(duì)象將包含一個(gè)指向另一個(gè)原型的指針，相應(yīng)的，另一個(gè)原型中也包含一個(gè)指向另一個(gè)構(gòu)造函數(shù)的指針。假如另一個(gè)原型又是另一個(gè)類型的實(shí)例，那么上述關(guān)系依然成立，如此層層遞進(jìn)，就構(gòu)成了實(shí)例與原型的鏈條，這就是我們說的原型鏈。

實(shí)現(xiàn)原型鏈有一種基本模式，代碼如下：

function SuperType() {
  this.prototype = true;
}
SuperType.prototype.getSuperValue = function () {
  return this.prototype
}

function SubType () {
  this.subprototype = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
  return this.subprototype 
}

var instance = new SubType();
alert(instance.getSuperValue()); // true

以上代碼定義了兩個(gè)類型：SuperType和SubType。每個(gè)類型分別有一個(gè)屬性和方法。它們的主要區(qū)別是SubType繼承了SuperType，而繼承是通過創(chuàng)建SuperType實(shí)例。換句話說，原來存在于SuperType的實(shí)例中的所有屬性和方法，現(xiàn)在也存在于SubType.prototype中了。在確立了繼承關(guān)系之后，我們給SubType.prototype添加了一個(gè)方法，這樣就在繼承了SuperType的屬性和方法的基礎(chǔ)上又添加了一個(gè)新方法。這個(gè)例子中的實(shí)例及構(gòu)造函數(shù)和原型之間的關(guān)系如圖：


image.png
image.png

二、繼承

繼承的方法：1.原型鏈繼承；2.構(gòu)造函數(shù)繼承；3.組合繼承； 4.原型式繼承； 5.寄生式繼承 ；6.寄生組合式繼承；

我們先定義一個(gè)父類

原型鏈繼承

function SuperType() {
  this.property = true;
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  this.Subproperty = false;
}
SubType.prototype = new SuperType(); // 繼承了SuperType
SubType.prototype.getSubValue = function() {
  return this.Subproperty ;
}
var instance = new SubType();
alert(instance.getSuperValue()) // true

繼承原理：通過讓子類的原型等于父類的實(shí)例，來實(shí)現(xiàn)繼承。
優(yōu)點(diǎn)：繼承了超類型的構(gòu)造函數(shù)的所有屬性和方法。
缺點(diǎn)：1、在創(chuàng)建子類實(shí)例時(shí)，無法向超類型的構(gòu)造函數(shù)傳參，繼承單一。
　　　2、所有新實(shí)例都會(huì)共享父類實(shí)例的屬性。（原型上的屬性是共享的，一個(gè)實(shí)例修改了原型引用類型的屬性，另一個(gè)實(shí)例的原型屬性也會(huì)被修改?。?/p> 

function SuperType() {
  this.colors = ['red','blue','green'];
}
function SubType() {
}
SubType.prototype = new SuperType(); // 繼承方法

var instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors); // ['red','blue','green','black']

var instance2 = new SubType();
console.log(instance2.colors); // ['red','blue','green','black']

構(gòu)造函數(shù)繼承

function SuperType() {
  this.colors = ['red', 'blue', 'green'];
}
function SubType() {
  SuperType.call(this); //  繼承了SuperType
}
var instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors); // ['red', 'blue', 'green', 'black']

var instance2 = new SubType();
console.log(instance2.colors); // ['red', 'blue', 'green']

在子類的內(nèi)部調(diào)用父類，通過call改變父類中this的指向。等于是復(fù)制父類的實(shí)例屬性給子類。
優(yōu)點(diǎn)：可以在子類構(gòu)造函數(shù)中，向超類型構(gòu)造函數(shù)傳遞參數(shù)。
缺點(diǎn)：只繼承了父類構(gòu)造函數(shù)的屬性，沒有繼承父類原型的屬性。所有的方法都在構(gòu)造函數(shù)中定義，無法實(shí)現(xiàn)復(fù)用，影響性能。

組合繼承 （原型鏈+構(gòu)造函數(shù)）

function SuperType(name) {
  this.name = name;
  this.colors = ['red','blue','green'];
}
SuperType.prototype.sayNAme = function() {
  alert(this.name);
}
function SubType(name,age) {
  SuperType.call(this, name); // 繼承屬性
  this.age = age;
}
SubType.prototype = new SuperType(); // 繼承方法
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  alert(this.age);
}

var instance1 = new SubType('xxx', 15);
instance1.colors.push('black');
console.log(instance1.colors); // ['red','blue','green','black']
instance1.sayNAme(); // xxx
instance1.sayAge(); // 15

var instance2 = new SubType('yyy', 12);
console.log(instance2.colors); // ['red','blue','green']
instance2.sayNAme(); // yyy
instance2.sayAge(); // 12

使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，通過構(gòu)造函數(shù)來實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)的復(fù)用，又能夠保證每個(gè)實(shí)例都有它自己的屬性。
缺點(diǎn)：調(diào)用兩次父類構(gòu)造函數(shù)。

三、與原型有關(guān)的幾個(gè)屬性和方法

2.1 prototype屬性

? prototype 存在于構(gòu)造函數(shù)中 (其實(shí)任意函數(shù)中都有，只是不是構(gòu)造函數(shù)的時(shí)候prototype我們不關(guān)注而已) ，他指向了這個(gè)構(gòu)造函數(shù)的原型對(duì)象。

? 參考前面的示意圖。

2.2 constructor屬性

? constructor屬性存在于原型對(duì)象中，他指向了構(gòu)造函數(shù)

看下面的代碼：

<script type="text/javascript">
    function Person () {
    }
    alert(Person.prototype.constructor === Person); // true
    var p1 = new Person();
    //使用instanceof 操作符可以判斷一個(gè)對(duì)象的類型。  
    //typeof一般用來獲取簡單類型和函數(shù)。而引用類型一般使用instanceof，因?yàn)橐妙愋陀胻ypeof 總是返回object。
    alert(p1 instanceof Person);    // true
</script>

我們根據(jù)需要，可以Person.prototype 屬性指定新的對(duì)象，來作為Person的原型對(duì)象。

但是這個(gè)時(shí)候有個(gè)問題，新的對(duì)象的constructor屬性則不再指向Person構(gòu)造函數(shù)了。

看下面的代碼：

<script type="text/javascript">
    function Person () {
        
    }
    //直接給Person的原型指定對(duì)象字面量。則這個(gè)對(duì)象的constructor屬性不再指向Person函數(shù)
    Person.prototype = {
        name:"志玲",
        age:20
    };
    var p1 = new Person();
    alert(p1.name);  // 志玲

    alert(p1 instanceof Person); // true
    alert(Person.prototype.constructor === Person); //false
    //如果constructor對(duì)你很重要，你應(yīng)該在Person.prototype中添加一行這樣的代碼：
    /*
    Person.prototype.constructor = Person;  //讓constructor重新指向Person函數(shù)

    */
</script>

2.3 _ _ proto _ _屬性(注意：左右各是2個(gè)下劃線)

? 用構(gòu)造方法創(chuàng)建一個(gè)新的對(duì)象之后，這個(gè)對(duì)象中默認(rèn)會(huì)有一個(gè)不可訪問的屬性 [[prototype]] , 這個(gè)屬性就指向了構(gòu)造方法的原型對(duì)象。

? 但是在個(gè)別瀏覽器中，也提供了對(duì)這個(gè)屬性[[prototype]]的訪問(chrome瀏覽器和火狐瀏覽器。ie瀏覽器不支持)。訪問方式：p1.proto

? 但是開發(fā)者盡量不要用這種方式去訪問，因?yàn)椴僮鞑簧鲿?huì)改變這個(gè)對(duì)象的繼承原型鏈。

<script type="text/javascript">
    function Person () {
        
    }
    //直接給Person的原型指定對(duì)象字面量。則這個(gè)對(duì)象的constructor屬性不再指向Person函數(shù)
    Person.prototype = {
        constructor : Person,
        name:"志玲",
        age:20
    };
    var p1 = new Person();

    alert(p1.__proto__ === Person.prototype);   //true
    
</script>

2.4 hasOwnProperty() 方法

? 大家知道，我們用去訪問一個(gè)對(duì)象的屬性的時(shí)候，這個(gè)屬性既有可能來自對(duì)象本身，也有可能來自這個(gè)對(duì)象的[[prototype]]屬性指向的原型。

? 那么如何判斷這個(gè)對(duì)象的來源呢？

? hasOwnProperty方法，可以判斷一個(gè)屬性是否來自對(duì)象本身。

<script type="text/javascript">
    function Person () {
        
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    //sex屬性是直接在p1屬性中添加，所以是true
    alert("sex屬性是對(duì)象本身的：" + p1.hasOwnProperty("sex"));
    // name屬性是在原型中添加的，所以是false
    alert("name屬性是對(duì)象本身的：" + p1.hasOwnProperty("name"));
    //  age 屬性不存在，所以也是false
    alert("age屬性是存在于對(duì)象本身：" + p1.hasOwnProperty("age"));
    
</script>

所以，通過hasOwnProperty這個(gè)方法可以判斷一個(gè)對(duì)象是否在對(duì)象本身添加的，但是不能判斷是否存在于原型中，因?yàn)橛锌赡苓@個(gè)屬性不存在。

也即是說，在原型中的屬性和不存在的屬性都會(huì)返回fasle。

如何判斷一個(gè)屬性是否存在于原型中呢？

2.5 in 操作符

? in操作符用來判斷一個(gè)屬性是否存在于這個(gè)對(duì)象中。但是在查找這個(gè)屬性時(shí)候，現(xiàn)在對(duì)象本身中找，如果對(duì)象找不到再去原型中找。換句話說，只要對(duì)象和原型中有一個(gè)地方存在這個(gè)屬性，就返回true

<script type="text/javascript">
    function Person () {
        
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    alert("sex" in p1);     // 對(duì)象本身添加的，所以true
    alert("name" in p1);    //原型中存在，所以true
    alert("age" in p1);     //對(duì)象和原型中都不存在，所以false
    
</script>

回到前面的問題，如果判斷一個(gè)屬性是否存在于原型中：

如果一個(gè)屬性存在，但是沒有在對(duì)象本身中，則一定存在于原型中。

<script type="text/javascript">
    function Person () {
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    
    //定義一個(gè)函數(shù)去判斷原型所在的位置
    function propertyLocation(obj, prop){
        if(!(prop in obj)){
            alert(prop + "屬性不存在");
        }else if(obj.hasOwnProperty(prop)){
            alert(prop + "屬性存在于對(duì)象中");
        }else {
            alert(prop + "對(duì)象存在于原型中");
        }
    }
    propertyLocation(p1, "age");
    propertyLocation(p1, "name");
    propertyLocation(p1, "sex");
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容