js繼承的幾種方法和es6繼承方法

 

    1、原型鏈繼

    1.基本思想

    利用原型鏈來實現繼承，超類的一個實例做爲子類的原型

    2、具體實現

 1 function F() {}
 2 
 3     //原型屬性，原型方法：
 4 
 5     F.prototype.name="Lee";
 6 
 7     F.prototype.age=33;
 8 
 9     F.prototype.run=function(){
10 
11         return this.name+" "+this.age+" running";
12 
13     }
14 
15     var f = new F();
16 
17     console.log(f.name);
18 
19     console.log(f.run);

 

    3.優缺點

    1）優勢

    簡單明瞭，容易實現

    實例是子類的實例，實際上也是父類的一個實例

    父類新增原型方法/原型屬性，子類都能訪問到

    2）缺點

    全部子類的實例的原型都共享同一個超類實例的屬性和方法

    沒法實現多繼承

    在建立子類的實例時 不能向父類的構造函數傳遞參數

 

    2、構造函數繼承

    1。基本思想

    經過使用call、apply方法能夠在新建立的對象上執行構造函數,用父類的構造函數來增長子類的實例

    2、具體實現

  

 1  function F() {
 2 
 3         // 屬性
 4 
 5         this.name = name || ‘dragon’;
 6 
 7         // 實例方法
 8 
 9         this.sleep = function(){
10 
11             console.log(this.name + '正在睡覺！');
12 
13         }
14 
15  
16 
17     }
18 
19     function C(name){
20 
21         F.call(this);
22 
23         this.name = name || 'Tom';
24 
25     }
26 
27     var c=new C()
28 
29     console.log(f.name);
30 
31     console.log(f.sleep);

 

    3.優缺點

    1）優勢

    簡單明瞭，直接繼承超類構造函數的屬性和方法

    2）缺點

    沒法繼承原型鏈上的屬性和方法

 

    3、實例繼承

    1.基本思想

    爲父類實例添加新特性，做爲子類實例返回

    具體實現

 1  function F() {
 2 
 3         // 屬性
 4 
 5         this.name = name || 'Animal';
 6 
 7         // 實例方法
 8 
 9         this.sleep = function(){
10 
11             console.log(this.name + '睡覺');
12 
13         }
14 
15     }
16 
17     function C(name){
18 
19         var instance = new F();
20 
21         instance.name = name || 'Tom';
22 
23         return instance;
24 
25     }
26 
27     var c = new C();
28 
29     console.log(c.name);
30 
31     console.log(c.sleep());

 

    特色：

1. 不限制調用方式，無論是new 子類()仍是子類(),返回的對象具備相同的效果

    缺點：

1. 實例是父類的實例，不是子類的實例

    2. 不支持多繼承

 

    4、組合繼承

    1.基本思想

    利用構造繼承和原型鏈組合

    2.具體實現

   

 1  function F() {
 2 
 3         // 屬性
 4 
 5         this.name = name || 'Animal';
 6 
 7         // 實例方法
 8 
 9         this.sleep = function(){
10 
11             console.log(this.name + '正在睡覺！');
12 
13         }
14 
15     }
16 
17     function C(name){
18 
19         F.call(this);//構造函數繼承
20 
21         this.name = name || 'Tom';
22 
23     }
24 
25     C.prototype = new F();//原型繼承
26 
27     var q=new C();
28 
29     console.log(q.name);
30 
31     console.log(q.sleep());

 

    3.優缺點

    1）優勢

    解決了構造繼承和原型鏈繼承的兩個問題

    2）缺點

     實際上子類上會擁有超類的兩份屬性，只是子類的屬性覆蓋了超類的屬性

 

    5、原型式繼承

    1.基本思想

    採用原型式繼承並不須要定義一個類，傳入參數obj,生成一個繼承obj對象的對象

    2、具體實現

   

 1  var obj = {
 2 
 3         name: "qw",
 4 
 5         age: "12",
 6 
 7         ada:"asd"
 8 
 9     }
10 
11  
12 
13     function F(o) {
14 
15         function C() {}
16 
17         C.prototype = o;
18 
19         return new C();
20 
21     }
22 
23     var q= F(obj)
24 
25     console.log(q.name);
26 
27     console.log(q.age);

 

    3.優缺點

    1）優勢：

     直接經過對象生成一個繼承該對象的對象

    2）缺點：

  不是類式繼承，而是原型式基礎，缺乏了類的概念

    6、寄生式繼承

    原型式+工廠模式 
 解決了組合繼承兩次調用構造函數的問題

    1.基本思想

    建立一個僅僅用於封裝繼承過程的函數，而後在內部以某種方式加強對象，最後返回對象

    2、具體實現

  

 1 //臨時中轉函數
 2 
 3     function obj(o) {
 4 
 5         function F() {}
 6 
 7         F.prototype = o;
 8 
 9         return new F();
10 
11     }
12 
13     //寄生函數
14 
15     function create(o){
16 
17         var q= obj(o);
18 
19         //能夠對f進行擴展
20 
21         q.sleep = function(){
22 
23             return this.name+」睡覺」;
24 
25         }
26 
27         return q;
28 
29     }
30 
31     var box = {
32 
33         name: 'Lee',
34 
35         age: 100,
36 
37         family: ['Dad', 'Mom', 'Sister']
38 
39     };
40 
41     var box1 = create(box);
42 
43     alert(box1.name);
44 
45     alert(box1.run());

 

    3.優缺點

    1）優勢：

    *  原型式繼承的一種拓展

    2）缺點：

    *  依舊沒有類的概念

 

    7、寄生組合繼承

    經過調用構造函數來繼承屬性，經過原型鏈混成形式繼承方法，與組合繼承不一樣之處在於子類型只繼承了超類型原型的一個副本，並未繼承其構造函數。所以只須要調用一次超類型構造函數。

1.基本思想

    結合寄生式繼承和組合式繼承，完美實現不帶兩份超類屬性的繼承方式

    2.具體實現

   

 1  //臨時中轉函數
 2 
 3     function obj(o) {
 4 
 5         function F() {}
 6 
 7         F.prototype = o;
 8 
 9         return new F();
10 
11     }
12 
13     //寄生函數
14 
15     function create(box,desk){
16 
17         var q = obj(box.prototype);
18 
19         q.construtor=d;
20 
21         d.prototype=q;
22 
23     }
24 
25     function B(name,age){
26 
27         this.name=name;
28 
29         this.age=age;
30 
31     }
32 
33     B.prototype.run=function(){
34 
35         return this.name + " " + this.age +  " running..."
36 
37     }
38 
39     function D(name,age){
40 
41         Box.call(this,name,age);
42 
43     }

 

    //經過寄生組合繼承來實現

    

1 create(B,D);//替代D.prototype=new B();
2 
3     var d= new D('Lee',100);
4 
5     alert(d.run());

 

 

    3.優缺點

    1）優勢：

    完美實現繼承，解決了組合式繼承帶兩份屬性的問題

    2）缺點：

     過於繁瑣，故不如組合繼承

 

 

 

    Es6. 繼承

   

 1  lass father{
 2 
 3         constructor(name){
 4 
 5             this.name=name
 6 
 7             this.names=[1,2,3]
 8 
 9         }
10 
11         getname(){
12 
13             console.log(this.name);
14 
15         }
16 
17     }
18 
19     class child extends father{
20 
21         constructor(name){
22 
23             super(name);
24 
25         }
26 
27         sayHello(){
28 
29             console.log("sayHello");
30 
31         }
32 
33         static hh(){
34 
35             console.log("hh")
36 
37         }
38 
39     }
40 
41     var cc=new child("juanjuan");
42 
43     cc.sayHello();
44 
45     cc.getname();  //juanjuan
46 
47     child.hh();  //hh
48 
49     cc.names.push("wqwq");
50 
51     var c1=new child("sasasa");
52 
53     console.log(c1.names)  //[1,2,3]

 

 

後續。。。。。。