js寄生組合式繼承

時間 2019-11-11

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>寄生組合繼承</title>
 6 </head>
 7 <body>
 8 <script>
 9     function inHeritPrototype(Son,Parent) {
10         var prototype=Object.create(Parent.prototype);
11         /*
12         es5語法，最後會返回一個new F（）的實例，此實例的__proto__指向Parent.prototype
13         至關於function create(obj){
14             function F(){}
15             F.prototype=obj;
16             return new F()
17         }
18         */
19         prototype.constructor=Son;
20         Son.prototype=prototype;
21     }
22     function Parent(name){
23         this.name=name;
24         this.colors=["red","black","blue"];
25     }
26     Parent.prototype.sayName=function () {
27         alert(this.name);
28     }
29     function Son(name,age) {
30         Parent.call(this,name);
31         this.age=age;
32     }
33     inHeritPrototype(Son,Parent);
34     Son.prototype.sayAge=function(){
35         alert(this.age);
36     }
37     var son=new Son('zxf',25);
38     console.log(Parent.prototype)
39     console.log(Son.prototype);//此處子類的原型沒有繼承父類的屬性，而是直接繼承了父類原型上的屬性和方法，
40     //繼承父類屬性的語句是Parent.call()這句話實現的，這樣就避免了組合式繼承的缺點-調用了兩個父類的構造函數，致使給子類的原型上添加了父類的實例屬性
41     //最完美的是子類的原型上只繼承父類的原型的屬性，而不是繼承父類實例的屬性，經過寄生組合式繼承能夠實現子類實例之間修改引用類型的屬性時互不影響
42     //由於這句話Parent.call()讓每一個子類都有個父類屬性的一個副本，是一個等於在子類實例上各自建立了屬性而不是指向父類的屬性，另外
43     //經過inHeritPrototype方法實現了子類只繼承父類原型上的方法和屬性，這裏實現了屬性和方法的共享，可謂完美啊
44 </script>
45 </body>
46 </html>