JS中的继承方式总结

1. 原型链继承(又称类继承)

Child.prototype = new Parent();

 1 function Parent (name, age) {
 2     this.name = name;
 3     this.age = age;
 4 }
 5 Parent.prototype.say = function(){
 6     console.log('hello, my name is ' + this.name);
 7 };
 8 function Child() {
 9 }
10 Child.prototype = new Parent('pursue');
11 var child1 = new Child();
12 child1.say(); //hello, my name is pursue
13 var child2 = new Child();
14 console.log(child1.say === child2.say);//true
15 console.log(child1.name === child2.name);//true

通过子类的原型prototype对父类实例化实现。利用将父类实例赋值给子类原型,达到继承的目的:子类原型可访问父类原型上的属性和方法 以及 父类构造函数中复制的属性和方法(类的构造函数中的属性和方法会在实例化对象的时候复制的该实例化对象中去)

Child.prototype instanceof Parent  //true

缺点一:父类的共有属性是引用类型时,子类的一个实例更改子类原型从父类构造函数继承来的该属性时,会直接引起子类其他实例中该继承属性值的变化。

缺点二:子类通过原型prototype实现对父类的实例化而实现继承,因此不能在创建父类的时候给父类传参,所以在实例化父类的是无法对父类构造函数内的属性进行初始化。

2. call(thisObj, param1, param2,...)  // 构造函数继承

 1 function Parent(username){
 2     this.username = username;
 3     this.hello = function(){
 4       alert(this.username);
 5     }
 6   }
  Parent.prototype.show = function() {console.log("show me")}
7 function Child(username,password){ 8 Parent.call(this,username); 9 this.password = password; 10 this.world = function(){ 11 alert(this.password); 12 } 13 } 14 var parent = new Parent("zhangsan"); 15 var child = new Child("lisi","123456"); 16 parent.hello(); 17 child.hello(); 18 child.world();
   child.show(); //TypeError

3. apply(thisObj, [param1,param2,...])  // 构造函数继承

 1 function Parent(username){
 2     this.username = username;
 3     this.hello = function(){
 4       alert(this.username);
 5     }
 6   }
  Parent.prototype.show = function() {console.log("show me")}
7 function Child(username,password){ 8 Parent.apply(this,new Array(username)); 9 this.password = password; 10 this.world = function(){ 11 alert(this.password); 12 } 13 } 14 var parent = new Parent("zhangsan"); 15 var child = new Child("lisi","123456"); 16 parent.hello(); 17 child.hello(); 18 child.world();
   child.show(); //TypeError

2,3 为构造函数式继承方式,通过在子类的构造函数作用环境中执行一次父类的构造函数实现,优化了 1 中的两个缺点,但是由于是通过构造函数继承的,故父类原型中的方法子类是无法调用到的,所以有了下面的组合继承方式。

4. 组合继承(call+原型链 / apply+原型链)

 1 function Parent(hello){
 2     this.hello = hello;
 3   }
 4   Parent.prototype.sayHello = function(){
 5     alert(this.hello);
 6   }
 7   function Child(hello,world){
 8     Parent.call(this,hello);//利用 call 方法 将父类的属性继承过来
 9     //Parent.apply(this,new Array(hello));//利用 apply 方法 将父类的属性继承过来
10     this.world = world;//新增一些属性
11   }
12   Child.prototype = new Parent();//将父类原型中的的方法继承过来
13   Child.prototype.sayWorld = function(){//新增一些方法
14     alert(this.world);
15   }
16   var c = new Child("zhangsan","lisi");
17   c.sayHello();
18   c.sayWorld();

 ① 在子类构造函数中执行父类构造函数,② 在子类原型上实例化父类

5.寄生组合继承,与4相似,只是将原型链换做了Object.create(Parent.prototype)

 1 function Parent(hello){
 2     this.hello = hello;
 3   }
 4   Parent.prototype.sayHello = function(){
 5     alert(this.hello);
 6   }
 7   function Child(hello,world){
 8     Parent.call(this,hello);//利用 call 方法 将父类的属性继承过来
 9     //Parent.apply(this,new Array(hello));//利用 apply 方法 将父类的属性继承过来
10     this.world = world;//新增一些属性
11   }
12   Child.prototype = Object.create(Parent.prototype);//将父类的方法继承过来
13   Child.prototype.sayWorld = function(){//新增一些方法
14     alert(this.world);
15   }
16   var c = new Child("zhangsan","lisi");
17   c.sayHello();
18   c.sayWorld();

6.扩展Object类

Object.prototype.方法名 = function (parentObject) {

  for(var attr in parentObject) {

    this[attr] = parentObject[attr];

  }

}

 1 function Parent (name) {
 2             this.name = name
 3             this.syaHi = function() {
 4                 console.log('name is '+this.name);
 5             }
 6         }
 7 
 8         function Child(pwd) {
 9             this.pwd = pwd;
10             this.info = function() {
11                 console.log(this.name, this.pwd);
12             }    
13         }
14 
15         Object.prototype.show = function(parentObject) {
16             for (var attr in parentObject) {
17                 this[attr] = parentObject[attr];
18             }
19         }
20         var p = new Parent('zhangsan');
21 
22         var c = new Child(12345);
23         c.show(p);
24 
25         c.syaHi();    // zhangsan
26         c.info();    // zhangsan,12345

7. 对象冒充  在B(子类)的构造函数中,定义属性 bb = A(父类)的构造函数,在B的构造函数的最后再将bb删除

 1 function Parent (name) {
 2             this.name = name
 3             this.show = function() {
 4                 console.log('name is '+this.name);
 5             }
 6         }
 7 
 8         function Child(name) {
 9             this.method = Parent;    // 将Parent类的构造函数赋值给Child的一个方法
10             this.method(name);        // 这里相当于把Parent的构造函数当作普通函数调用了一次,对象冒充
11             delete this.method;        // 一处这个用来做对象冒充功能的method
12         }
13 
14         var p = new Parent('父类');
15         p.show();    // name is 父类
16 
17         var c = new Child('子类');
18         c.show();    // name is 子类
原文地址:https://www.cnblogs.com/s-qiu/p/7087521.html