js实现继承的各种方法及缺点

本篇文章主要介绍了js中继承的几种用法总结。

1.构造函数实现继承

代码：

  function Parent(username){
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }
  Parent.prototype.bye = function(){
      alert(this.username+": Goodbye!");
    };
  function Child(username,password){
    this.father = Parent;
    this.father(username);//最关键的一行
    delete this.father;
//以上3行等价于Parent.call(this,username)或Parent.call(this,[username])
    this.password = password;
    this.world = function(){
      alert(this.password);
    }
  }
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello();//zhangsan
  child.hello();//lisi
  child.world();//123456
  parent.bye(); //zhangsan ：Goodbye
  child.bye();// Error: child.bye is not a function

缺点：由于方法在构造函数内创建，不能做到函数复用而降低效率，并且不能继承父类的prototype定义的属性与方法。

2.原型链方式:子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承

代码:

function Parent(){
     this.elements=["ul","li","p"];
  }
  Parent.prototype.hello = "hello";
  Parent.prototype.sayHello = function(){
    alert(this.hello);
  }
 
  function Child(){
  }
  Child.prototype = new Parent();//这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
  Child.prototype.world = "world";
  Child.prototype.sayWorld = function(){
    alert(this.world);
  }
  var c = new Child();
  c.sayHello();//hello
  c.sayWorld();//world
  alert(c.elements);//ul,li,p
  c.elements.push("div");
  c.hello="div";
  var c2 = new Child();
  c2.sayHello();//hello
  alert(c2.elements);//ul,li,p,div

缺点：由于prototype是各个子类的实例共享的，故对某一个子类prototype中的属性进行修改，也会体现在所有子类上（如以上代码，Child.prototype 继承了Parent的实例，故Child.prototype.elements为所有Child的实例共享），另外本方法还有一个缺点是不能想超类的构造函数传参数。
3.组合继承：结合以上两种方式，用prototype继承超类的prototype的属性、方法，用构造函数继承超类的实例的属性、方法。
代码：

 function Parent(username){
    this.elements =["li","ul","p"];
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }
  Parent.prototype.hello = "hello";
  Parent.prototype.bye = function(){
      alert(this.username+": Goodbye!");
    };
  function Child(username,password){
    Parent.call(this,[username]);
    this.password = password;
    this.word = function(){
      alert(this.password);
    }
  }
  Child.prototype=new Parent();
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello();//zhangsan
  child.hello();//lisi
  child.word();//123456
  child.elements.push("div");
  var child2 = new Child("wangwu","111111");
  alert(child2.elements);//ul,li,p

缺点：与构造函数模式相比，函数复用问题未解决。
4.寄生式继承：寄生式继承是创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再返回对象。

 var person = {name : "Nicholas", friends :["shelby","Court","Van"],
sayGoodbye :function(){alert("Goodbye");}};
  function createSon(original){  
   var clone = original;//通过调用函数创建一个新对象  
   clone.sayHi =function(){ //以某种方式来增强这个对象  
      alert("hi");
   };  
   return clone;//返回这个对象  
  }
var son = createSon(person);  
son.sayHi();//"hi"  
son.sayGoodbye();

缺点：与构造函数模式类似，不能做到函数复用而降低效率。

5.寄生组合式继承:本质上，就是使用寄生式继承来继承超类型的prototype，然后再将结果指定给子类型的prototype。

代码：

function inheritPrototype(subType, superType) {
    var prototype = superType.prototype; 
    prototype.constructor = subType; 
    subType.prototype = prototype; 
}
    function Parent(name) {
        this.name = name;
        this.elements=["ul","li","p"];
    }


    Parent.prototype.sayName = function() {
        alert(this.name);
    }


    function Child(name, age) {
        Parent.call(this, name);
        this.age = age;
    }


    inheritPrototype(Child, Parent);
    Child.prototype.sayAge = function() {
        alert(this.age);
    }
     var parent = new Parent("zhangsan");
  var child = new Child("lisi","12");
  parent.sayName ();//zhangsan
  child.sayName ();//lisi
  child.sayAge();//12
  child.elements.push("div");
  var child2 = new Child("wangwu","22");
  child2.sayAge();//22
  alert(child2.elements);//li,ul,p