[Javascript] 继承 (原型继承, 类继承)

(1) 原型链继承

在js中没有类的概念, 所以继承的话, 使用原型链继承

B.prototype=new A();

4步：[1] 初始化对象[2] B.prototype=A.prototype[3] A作用域给B A.call(B.prototype)[4] 返回对象

<script type="text/javascript">  function Parent(){     this.property="parent_value";  }  Parent.prototype={     property:"parent_value_prototype",     get:function(){        return this.property;     }  }  function Child(){   this.property="child_value";  }  Child.prototype={     property:"child_value_prototype",     get:function(){       return this.property;     }  }  Child.prototype=new Parent();//继承  var child=new Child();  console.log(child.get());  //child_value </script>

<script type="text/javascript">  function Parent(){     this.property="parent_value";  }  Parent.prototype={     property:"parent_value_prototype",     get:function(){        return this.property;     }  }  function Child(){   //this.property="child_value";   }  Child.prototype={     property:"child_value_prototype",     get:function(){       return this.property;     }  }  Child.prototype=new Parent();//继承  var child=new Child();  console.log(child.get());  //parent_value </script>

<script type="text/javascript">  function Parent(){     //this.property="parent_value";  }  Parent.prototype={     property:"parent_value_prototype",     get:function(){        return this.property;     }  }  function Child(){   //this.property="child_value";   }  Child.prototype={     property:"child_value_prototype",     get:function(){       return this.property;     }  }  Child.prototype=new Parent();//继承  var child=new Child();  console.log(child.get());  //parent_value_prototype  </script>

<script type="text/javascript">  function Parent(){     //this.property="parent_value";  }  Parent.prototype={     //property:"parent_value_prototype",     get:function(){        return this.property;     }  }  function Child(){   //this.property="child_value";   }  Child.prototype={     property:"child_value_prototype",     get:function(){       return this.property;     }  }  Child.prototype=new Parent();//继承  var child=new Child();  console.log(child.get());  //undefined </script>

Resullt:
继承了Parent的Child,
[1] 会从Child的实例中找
[2] 再从Parent实例中找
[3] 再从Parent.prototype中找
( 不会从Child.prototype中找)

---

(2) 原型链继承 优点+缺点

优点：

  父类的实例属性得到了继承

缺点：

[1] 父类实例属性为引用类型, 修改会改变所有的之类

 Child继承了Parent后，Child.prototype就成了Parent的一个实例，因此它也拥有name属性

<script type="text/javascript">  function Parent(){     this.name=["yoonA","jessica"];  }  function Child(){     }  //继承  Child.prototype=new Parent();  //实例child1  var child1=new Child();  //child1修改了值  child1.name.push("krystal");  console.log(child1.name);  //["yoonA", "jessica", "krystal"]   //实例child2  var child2=new Child();  //但是child2的值也改变了  console.log(child2.name);  //["yoonA", "jessica", "krystal"] </script>

[2] 传参问题

在创建子实例时候，不能向父类传参

<script type="text/javascript">  function Parent(name){     this.name=name;     }  Parent.prototype.say=function(){    console.log(this.name);  }  function Child(name){    }  //继承  Child.prototype=new Parent();  var c=new Child("krystal");  c.say();  //undefined</script>

---

(3) 类继承

Parent.call(this,name);
构造函数的应用， 子内部call 调用父类的构造器, 实现传参问题

  function Parent(name){     this.name=name;     }  Parent.prototype.say=function(){    console.log(this.name);  }  function Child(name){      Parent.call(this,name);   }  //Child.prototype=new Parent();  var c=new Child("krystal");  console.log(c.name);  c.say();

优点+缺点:

优点： 可以传参
缺点： 但是Child子 无法使用 Parent父的Prototype的内容

---

(4) 原型链+类继承

Parent.call(this,name);

传参, 实现对实例属性的继承

Child.prototype=new Parent();

实现原型属性和方法的继承

  function Parent(name){     this.name=name;     this.school=["hkbu","hku"];      }  Parent.prototype.say=function(){    console.log(this.name);  }  function Child(name){      Parent.call(this,name);     // 类继承： 继承实例属性  }  Child.prototype=new Parent();  // 原型继承: 继承原型的方法和属性  var c=new Child("krystal");  console.log(c.name);  c.say();  c.school.push("NEU");  console.log(c.school);  var c2=new Child("jessica");  console.log(c2.school);

Result: