继承的几种方法

继承：一个没有某个方法的对象使用具有这个方法的对象的方法

对象之间的继承，类之间的继承

对象继承：

改变this的指向

1 // var obj = {
2                 //     name:"admin",
3                 //     show:function(){console.log(this.name)}
4                 // }
5                 // var obj2 = {name:"root"}
6                 // obj.show()
7                 // obj.show.call(obj2);
8                 // obj.show.apply(obj2);
9                 // obj.show.bind(obj2)();

new关键字

1 // function Fn(){
2                 //     this.name = "admin";
3                 // }
4                 // Fn.prototype.show = function(){
5                 //     console.log(this.name)
6                 // }
7                 // var f = new Fn();
8                 // f.show();

构造函数与构造函数之间的继承

1.继承-改变this的指向（构造函数继承）

只能继承构造函数中的内容，不能继承原型上的方法

简单，方便

可以轻松实现多继承

 1 function Parent(n){
 2         this.name = n;
 3         this.show = function(){
 4             console.log(this.name);
 5         }
 6     }
 7     Parent.prototype.init = function(){
 8         console.log("hello")
 9     }
10 
11 
12     function Parent2(){
13         this.abc = function(){
14             console.log("abc");
15         }
16     }
17     function Parent3(){
18         this.qwe = function(){
19             console.log("qwe");
20         }
21     }
22 
23 
24     function Child(n){
25         Parent.call(this,n);
26         Parent2.call(this);
27         Parent3.call(this);
28         // Parent.apply(this,[n]);
29         // Parent.bind(this,n)();
30     }
31 
32 
33     var p = new Parent("html");
34     var c = new Child("div");
35 
36 
37     p.show();
38     p.init();
39     c.show();
40     // c.init();
41     c.abc();
42     c.qwe();

2.原型继承：原型对象继承，原型链继承

原型对象继承

只能继承原型对象上的方法或属性，不能继承构造函数中的方法或属性

1.没有兼容问题

2.不方便传参

 1 function Parent(n){}
 2     Parent.prototype.name = "html";
 3     Parent.prototype.show = function(){
 4         console.log(this.name);
 5     }
 6     Parent.prototype.abc = function(){
 7         console.log("abc");
 8     }
 9 
10 
11     function Child(n){}
12 
13 
14     // Child.prototype = Parent.prototype;
15     for(var i in Parent.prototype){
16         Child.prototype[i] = Parent.prototype[i];
17     }
18 
19 
20     Child.prototype.abc = function(){
21         console.log("hello");
22     }
23 
24 
25     var p = new Parent();
26     var c = new Child();
27 
28 
29     p.show();
30     c.show();
31     p.abc();
32     c.abc();

原型链继承

既能继承构造函数，又能继承原型

不方便传参

 1 function Parent(n){
 2         this.name = n;
 3     }
 4     Parent.prototype.show = function(){
 5         console.log(this.name);
 6     }
 7 
 8 
 9     function Child(){}
10 
11 
12     Child.prototype = new Parent("div");
13 
14 
15     // Child.prototype.show = function(){
16     //     console.log("hello");
17     // }
18 
19 
20     var p = new Parent("html");
21     var c = new Child();
22 
23 
24     console.log(p);
25     console.log(c);
26 
27 
28     p.show();
29     c.show();

混合继承：构造函数继承 + 原型对象（链）继承

既能继承构造函数，又能继承原型，还方便传参

常用继承方法之一

 1 function Parent(n){
 2         this.name = n;
 3     }
 4     Parent.prototype.show = function(){
 5         console.log(this.name);
 6     }
 7 
 8 
 9     function Child(n){
10         Parent.call(this,n);
11     }
12     for(var i in Parent.prototype){
13         Child.prototype[i] = Parent.prototype[i];
14     }
15     Child.prototype.show = function(){
16         console.log("hello");
17     }
18 
19 
20     var p = new Parent("html");
21     var c = new Child("div");
22 
23 
24     console.log(p);
25     console.log(c);
26 
27 
28     p.show();
29     c.show();

ES6-class继承，在语法层面上实现的继承方式，好用，方便，简单

有兼容

构造函数+原型链继承

class Parent{
        constructor(n){
            this.name = n;
        }
        show(){
            console.log(this.name);
        }
    }


    class Child extends Parent{
        constructor(n){
            super(n);
        }
    }


    var p = new Parent("html");
    p.show();


    var c = new Child("div");
    c.show();


    console.log(p)
    console.log(c)

猜你喜欢