深入了解javascript中的prototype與繼承

更新時(shí)間：2013年04月14日 23:30:05 作者：

本篇文章，小編將和大家一起深入了解javascript中的prototype與繼承，有需要的朋友可以參考一下

通常來說，javascript中的對象就是一個(gè)指向prototype的指針和一個(gè)自身的屬性列表。javascript創(chuàng)建對象時(shí)采用了寫時(shí)復(fù)制的理念。
只有構(gòu)造器才具有prototype屬性，原型鏈繼承就是創(chuàng)建一個(gè)新的指針，指向構(gòu)造器的prototype屬性。
prototype屬性之所以特別，是因?yàn)閖avascript時(shí)讀取屬性時(shí)的遍歷機(jī)制決定的。本質(zhì)上它就是一個(gè)普通的指針。

構(gòu)造器包括:
1.Object
2.Function
3.Array
4.Date
5.String

下面我們來舉一些例子吧

復(fù)制代碼代碼如下:

<script> 
//每個(gè)function都有一個(gè)默認(rèn)的屬性prototype，而這個(gè)prototype的constructor默認(rèn)指向這個(gè)函數(shù)
//注意Person.constructor 不等于 Person.prototype.constructor. Function實(shí)例自帶constructor屬性 
   function Person(name) {  
        this.name = name;  
    };  
    Person.prototype.getName = function() {  
        return this.name;  
    };  
    var p = new Person("ZhangSan");  

    console.log(Person.prototype.constructor === Person); // true  
    console.log(p.constructor === Person);  // true ,這是因?yàn)閜本身不包含constructor屬性，所以這里其實(shí)調(diào)用的是Person.prototype.constructor     
</script>

我們的目的是要表示
1.表明Person繼承自Animal
2. 表明p2是Person的實(shí)例

我們修改一下prototype屬性的指向，讓Person能獲取Animal中的prototype屬性中的方法。也就是Person繼承自Animal(人是野獸)

復(fù)制代碼代碼如下:

     function Animal(){ }

     Person.prototype = new Animal()；//之所以不采用Person.prototype = Animal.prototype,是因?yàn)閚ew 還有其他功能，最后總結(jié)。
     var p2 = new Person("ZhangSan");

//(p2 -> Person.prototype -> Animal.prototype, 所以p2.constructor其實(shí)就是Animal.prototype.constructor)

     console.log(p2.constructor === Person); // 輸出為false ,但我們的本意是要這里為true的，表明p2是Person的實(shí)例。此時(shí)目的1達(dá)到了，目的2沒達(dá)到。
</script>

但如果我們這么修正

Person.prototype = new Animal()；
Person.prototype.constructor = Person；

這時(shí)p2.consturctor是對了，指向的是Person，表示p2是Person類的實(shí)例，但是新問題出現(xiàn)了。此時(shí)目的2達(dá)到了，目的1沒達(dá)到。
目的1和目的2此時(shí)互相矛盾，是因?yàn)榇藭r(shí)prototype表達(dá)了矛盾的兩個(gè)意思，
1表示父類是誰
2作為自己實(shí)例的原型來復(fù)制

因此我們不能直接使用prototype屬性來表示父類是誰，而是用getPrototypeOf()方法來知道父類是誰。

復(fù)制代碼代碼如下:

Person.prototype = new Animal()；

Person.prototype.constructor = Person；

var p2 = new Person("ZhangSan"); 

p2.constructor     //顯示 function Person() {}

Object.getPrototypeOf(Person.prototype).constructor     //顯示 function Animal() {}

就把這兩個(gè)概念給分開了

最后總結(jié)一下:
當(dāng)代碼var p = new Person()執(zhí)行時(shí)，new 做了如下幾件事情：

創(chuàng)建一個(gè)空白對象

創(chuàng)建一個(gè)指向Person.prototype的指針

將這個(gè)對象通過this關(guān)鍵字傳遞到構(gòu)造函數(shù)中并執(zhí)行構(gòu)造函數(shù)。

如果采用Person.prototype = Animal.prototype來表示Person繼承自Animal, instanceof方法也同樣會(huì)顯示p也是Animal的實(shí)例，返回為true.之所以不采用此方法,是因?yàn)橄旅鎯蓚€(gè)原因：

1.new 創(chuàng)建了一個(gè)新對象，這樣就避免了設(shè)置Person.prototype.constructor = Person 的時(shí)候也會(huì)導(dǎo)致Animal.prototype.constructor的值變?yōu)镻erson,而是動(dòng)態(tài)給這個(gè)新創(chuàng)建的對象一個(gè)constructor實(shí)例屬性，這樣實(shí)例上的屬性constructor就覆蓋了Animal.prototype.constructor，這樣Person.prototype.constructor和Animal.prototype.contructor就分開了。

2.Animal自身的this對象的屬性沒辦法傳遞給Person

通過使用 hasOwnProperty()方法,什么時(shí)候訪問的是實(shí)例屬性,什么時(shí)候訪問的是原型屬性就一清二楚了。

您可能感興趣的文章: