第201天：js---實作繼承的5種方式

一、構造函數方式

1 //構造函數
 2     function People(){
 3         this.race = '漢族';
 4     }
 5     People.prototype={
 6         eat:function(){
 7             console.log('123');
 8         }
 9     }
10 
11     /*學生對象*/
12     function Student(name, skin) {
13         People.apply(this, arguments);
14         this.name = name;
15         this.skin = skin;
16     }
17     //執行個體化 
18     var zhangsan = new Student('張三', '黃皮膚')
19     console.log(zhangsan.name); //張三
20     console.log(zhangsan.race); //漢族
21     zhangsan.eat();//報錯
22     //原因：無法繼承person原型對象中的方法      

二、原型對象實作繼承

1 //基類
 2     var Person = function(){
 3         this.name = '張三';
 4         this.age = 20;
 5     }
 6     Person.prototype = {
 7         say : function(){
 8             console.log('Person.prototype - say');
 9         }
10     }
11 
12 
13     //構造函數
14     var Student = function(name,age,sex){
15         this.sex = sex;
16     }
17     //學生繼承person,則擁有person原型中的方法
18     Student.prototype = new Person();
19     Student.prototype.getTeacher = function(){
20         console.log('Student.prototype.getTeacher');
21     }
22 
23     //測試 -- 學生類擁有了person中的方法
24     var xiaoWang = new Student('小王',10,'男');
25     //xiaoWang.name = '張三'
26     console.log(xiaoWang.name);//張三
27     xiaoWang.say();//Person.prototype - say
28     xiaoWang.getTeacher();//Student.prototype.getTeacher
29 
30 
31 
32     /*存在的問題*/
33     /*無法通過傳參數定義對象*/
34     console.log(xiaoWang.name);//張三
35     console.log(xiaoWang.age);//20
36 
37 
38     /*解決方式*/
39     xiaoWang.name = '小明';
40     xiaoWang.age = 22;
41     console.log(xiaoWang.name);//小明
42     console.log(xiaoWang.age);//22      

三、組合方式（構造函數+原型）

1 function Person(name, age) {
 2         this.name=name;
 3         this.age=age;
 4     }
 5     Person.prototype.say = function () {
 6         console.log("我是"+this.name);
 7     }
 8 
 9 
10     function Student(name, age, no) {
11         /*會自動調用Person的方法，同時将name age傳遞過去*/
12         Person.call(this,name,age);
13         //自己的屬性
14         this.no = no;
15     }
16     Student.prototype = new Person();
17     var stu1 = new Student("小明",22,123);
18     console.log(stu1.name);//小明
19     console.log(stu1.say());//我是小明
20     console.log(stu1.no);//123      

四、寄生組合式

1 /*繼承的固定函數*/
 2     function inheritPrototype(subType,superType){
 3         var prototype = Object(superType.prototype);
 4         prototype.constructor = subType;
 5         subType.prototype = prototype;
 6     }
 7 
 8     function Person(name){
 9         this.name = name;
10     }
11     Person.prototype.say= function(){
12         console.log("我是"+this.name);
13     }
14 
15     function Student(name,age){
16         Person.call(this,name);
17         this.age = age;
18     }
19 
20     inheritPrototype(Student,Person);
21     var xiaozhang = new Student('小張',20);
22     console.log(xiaozhang.name);//小張
23     xiaozhang.say();//我是小張      

五、拷貝方式

1 var Chinese = {nation:'中國'};
 2     var Doctor ={career:'醫生'}
 3 
 4 //    請問怎樣才能讓"醫生"去繼承"中國人"，也就是說，我怎樣才能生成一個"中國醫生"的對象？
 5 //    這裡要注意，這兩個對象都是普通對象，不是構造函數，無法使用構造函數方法實作"繼承"。
 6 
 7 
 8     function extend(p) {
 9         var c = {};
10         for (var i in p) { 　　　　　
11             c[i] = p[i];　　　　
12         }
13         c.uber = p;
14         return c;
15     }
16 
17 
18     var Doctor = extend(Chinese);
19     Doctor.career = '醫生';
20     alert(Doctor.nation); // 中國      

六、繼承的架構

1、base2.js

1 <script src='base2.js'></script>
 2 <script>
 3     /*基類*/
 4     var Person = Class.extend ( {
 5         init: function (name ) {
 6             this.name = name;
 7         },
 8         dance: function ( ) {
 9             alert('跳舞');
10         }
11     } );
12 
13     /*子類*/
14     var Student = Person.extend({
15         init: function(){
16             //false表示什麼意思
17             this._super( false );
18         },
19         /*重寫父類方法*/
20         dance: function(){
21             /*調用父類*/
22             this._super();
23             alert('唱歌');
24         },
25         /*實作自己的方法*/
26         swingSword: function(){
27             return true;
28         }
29     });
30 
31     var xiaozhang = new Student();
32     xiaozhang.dance();
33 </script>      

2、simple.js

1 <script src='simple.js'></script>
 2 <script>
 3     var Person = Class.extend({
 4         init: function(age,name){
 5             this.age = age;
 6             this.name = name;
 7         },
 8         dance: function(){
 9             alert("跳舞");
10         }
11     });
12     var Student = Person.extend({
13         init: function(age,name,height){
14             this._super(age,name);
15             this.height = height;
16         },
17         dance: function(){
18             /*調用父類的同名方法*/
19             this._super();
20             /*同時又可以調用自己的方法*/
21             alert("唱歌");
22         }
23     });
24 
25 
26     var xiaozhang = new Student(21,'小張','121');
27     xiaozhang.dance();
28 </script>      

七、對象繼承實作計算周長

1 var sharp = function(name){
 2     this.name = name;
 3 }
 4 sharp.prototype = {
 5         //改方法被繼承,這個方法是大家都有的,并且都一樣,可以放在基類中
 6         getName : function(){
 7                 return this.name;
 8             }
 9         //會根據不同的形狀而被重寫
10         ,zhouchang : function(){
11                return 100;
12             }
13     };
14 
15 
16 //矩形對象
17 var Rectangle = function(length,width){
18     sharp.call(this, name);
19     this.name='矩形';
20     this.length =length;
21     this.width = width;
22 }
23 //重寫計算周長的方法
24 Rectangle.prototype = new sharp();
25 Rectangle.prototype.zhouchang = function(){
26      return (this.length + this.width) * 2;
27 }
28 
29 
30 //好處
31 //以後新增一個計算其他形狀的需求,不用修改原來的代碼,隻需要擴充即可.
32 //新增一個正方形
33 var Square  = function(length){
34     sharp.call(this, name);
35     this.name='正方形';
36     this.length =length;
37     //this.width = width;
38 }
39 //重寫計算周長的方法
40 Square.prototype = new sharp();
41 Square.prototype.zhouchang = function(){
42      return this.length * 4;
43 }
44 
45 
46 //新增一個圓形
47 var Circle   = function(radius){
48     sharp.call(this, name);
49     this.name='圓形';
50     this.radius =radius;
51     //this.width = width;
52 }
53 
54 //重寫計算周長的方法
55 Circle.prototype = new sharp();
56 Circle.prototype.zhouchang = function(){
57     //圓的周長=2×圓周率×半徑 或 圓周率×直徑
58       return 2 * Math.PI * this.radius;
59 }
60 
61 
62 
63 //使用對象 封裝
64 function computezhouchang(shape) {
65     alert( shape.getName() + '的周長是' + shape.zhouchang() );
66 }
67 
68 //組裝世界
69 //var rectangle = new Rectangle('矩形',10,20);
70 //computezhouchang(rectangle);
71 
72 //去掉屬性name
73 var rectangle = new Rectangle(10,20);
74 computezhouchang(rectangle);
75 
76 //正方形
77 var square = new Square(10);
78 computezhouchang(square);
79 
80 //圓形
81 var circle = new Circle(10);
82 computezhouchang(circle);