[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: