Javascript中的prototype與繼承

1.Object 2.Function 3.Array 4.Date 5.String

1. //每個function都有一個預設的屬性prototype，而這個prototype的constructor預設指向這個函數
2. //註意Person.constructor 不等於 Person.prototype.constructor. Function實例自帶constructor屬性
3. functionPerson(name){
4. this.name = name;
5. };
6. Person.prototype.getName =function(){
7. returnthis.name;
8. };
9. var p =newPerson("ZhangSan");
10. console.log(Person.prototype.constructor===Person);// true
11. console.log(p.constructor===Person);// true ,這是因為p本身不包含constructor屬性，所以這裡其實調用的是Person.prototype.constructor

運行一下 »

1.表明Person繼承自Animal 2. 表明p2是Person的實例 

1. functionPerson(name){
2. this.name = name;
3. };
4. Person.prototype.getName =function(){
5. returnthis.name;
6. };
7. var p1 =newPerson("ZhangSan");
8. console.log(p.constructor===Person);// true
9. console.log(Person.prototype.constructor===Person);// true
10.  
11. functionAnimal(){}
12. Person.prototype =newAnimal()；//之所以不採用Person.prototype = Animal.prototype,是因為new 還有其他功能，最後總結。
13. var p2 =newPerson("ZhangSan");
14. //(p2 -> Person.prototype -> Animal.prototype, 所以p2.constructor其實就是Animal.prototype.constructor)
15. console.log(p2.constructor===Person);// 輸出為false ,但我們的本意是要這裡為true的，表明p2是Person的實例。此時目的1達到了，目的2沒達到。

運行一下 »

但如果我們這麼修正

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

1表示父類是誰 2作為自己實例的原型來複制 

1. Person.prototype =newAnimal()；
2. Person.prototype.constructor=Person；
3. var p2 =newPerson("ZhangSan");
4. p2.constructor//顯示 function Person() {}
5. Object.getPrototypeOf(Person.prototype).constructor//顯示 function Animal() {}

new做了哪些事情？

當代碼var p = new Person()執行時，new 做瞭如下幾件事情：

創建一個空白對象

創建一個指向Person.prototype的指針

將這個對象通過this關鍵字傳遞到構造函數中並執行構造函數。

具體點來說，在下麵這段代碼中，

1. Person.prototype.getName =function(){}

1. var person =newPerson();
2.  
3. 其實類似於
4.  
5. var person =newObject();
6.  
7. person.getName =Person.prototype.getName;

因此通過person.getName()調用方法時，this指向的是這個新創建的對象，而不是prototype對象。

 這其實在給現有函數加上新功能的情況下會用到，我們可以這麼擴展現有的方法：

1. //function myFunc 的寫法基本上等於 var myFunc = new Function();
2.  
3. function myFunc (){
4. }
5.  
6. myFunc =function(func){
7. 　　//可以在這裡做點其他事情
8. returnfunction(){
9. 　　　　　//可以在這裡做點其他事情
10. return func.apply(this,arguments);
11. }
12. }(myFunc)

 也可以在Function.prototype方法里直接通過this來訪問上面代碼的myFunc所指向的對象

1. function myFunc (){
2. }
3.  
4. if(!Function.prototype.extend){
5. Function.prototype.extend =function(){
6. var func =this;
7.  
8. returnfunction(){
9. func.apply(this,arguments);
10. }
11. }
12. };
13.  
14. var myFunc = myFunc.extend();

總結一下

如果採用Person.prototype  = Animal.prototype來表示Person繼承自Animal, instanceof方法也同樣會顯示p也是Animal的實例，返回為true.

之所以不採用此方法,是因為下麵兩個原因：

1.new 創建了一個新對象，這樣就避免了設置Person.prototype.constructor = Person 的時候也會導致Animal.prototype.constructor的值變為Person,而是動態給這個新創建的對象一個constructor實例屬性。這樣實例上的屬性constructor就覆蓋了Animal.prototype.constructor，這樣Person.prototype.constructor和Animal.prototype.contructor就分開了。

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

但是像下麵這樣直接調用構造函數又可能失敗，或者產生其他影響。

1. Person.prototype =newAnimal();

 為了避免這種情況，所以我們引入了一個中間函數。所以正確的做法應該是

1. Person.prototype =(funtion(){
2.  
3. 　　function F(){};
4.  
5. 　　F.prototype =Animal.prototype
6.  
7. 　　returnnew F();
8.  
9. })()