浅谈JS继承

Posted 全凭一口仙气儿活着

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈JS继承相关的知识,希望对你有一定的参考价值。

    今天呢,我们来谈谈继承,它也是JS语言中的一大重点,一般什么时候我们会用继承呢,比如有两个拖拽的面板,两个功能基本一致,只是第二个面板多了一些不同的东西,这个时候,我们就会希望,要是第二个直接能继承第一个面板相同的功能就好了。所以这个时候继承就登场啦。。。

  继承:在原有对象的基础上,略作修改,得到一个新的对象,并且不影响原有对象的功能

   在具体讲继承前,首先来了解一个东西,这个东西叫做原型链,是继承的基础。我们先来看一段代码:

function Aaa(){}
Aaa.prototype.num = 3;
var a1 = new Aaa();
alert(a1.num); //3   a1是怎么找到的原型下面的num呢?

这是一个很简单的代码,但是我们有没有想过一个问题,既然我们把变量放到了原型下面,那么a1是怎么找到这个变量的呢?实际上就是通过原型链啦。

原型链是指:实例对象与原型之间的连接,__proto__(它是一种隐式连接 ,我们看不到,但确实存在,a1能跟着这个链找到对应的原型下面的东西)。

看下面的这个图:首先a1先看看自己的下面有没有num,发现没有之后,就会随着原型链,找找找,找到了原型,发现下面有,就弹出了这个num.打开firebug可以看到num是通过原型链中原型下被找到的。

那如果是下面这种情况呢:

function Aaa(){
   this.num =10;
}
Aaa.prototype.num = 3;
var a1 = new Aaa();
alert(a1.num); //10

我们之前讲过原型的优先级是比较低的,其实也是原型链的原因,对象会首先在自己的地盘找,找不到才会从原型链上找,而且最外层的原型链是object,所以上面的意思其实下面就是这样的:

 

   1 拷贝继承

首先来看个栗子:父类有属性name,age, 方法show,子类有属性name,age,sex,怎么能让子类直接继承父类的属性和方法呢?

对于属性的继承:其实我们可以在子类里面直接调用父类的函数。

方法的继承:因为方法在原型下面,原型本身也是一个对象,我们可以直接把父类的原型对象赋给子类的原型对象。那么子类就会有父类的方法了。

 

function Create(name,age){ 
    this.name = name;
    this.age = age;
}
Create.prototype.show = function(){ 
    alert(this.name);     
}
function Create2(name,age,sex){ 
    Create(name,age); //这样调用this指的是window
    this.sex = sex;
}
Create2.prototype = Create.prototype;  //这样对象赋值会存在引用关系

 

但是这个方法存在两个问题:

1  因为在子类中,我们希望的是this指的是当前的对象,但直接这样调用就指的是window,所以我们需要用call()方法修改一下this的指向。

2  对象复制会存在引用问题,也就是说现在两个对象指向的是同一个地址,其中一个原型的一些东西的更改会影响另一个,这肯定不是我们所希望的。所以我们通过拷贝赋值,来避免引用。

function Create(name,age){ 
    this.name = name;
    this.age = age;
}
Create.prototype.show = function(){ 
    alert(this.name);     
}
function Create2(name,age,sex){ 
    Create.call(this,name,age);
    this.sex = sex;
}
extend(Create2.prototype ,Create.prototype ); //函数之间赋值不会存在引用 
Create2.prototype.showJob = function(){}; //不会影响父类
var p2 = new Create2(\'hua\',11,\'men\');
p2.show();   // hua
function extend(obj1,obj2){   
      for(var attr in obj2){   //循环遍历对象下面的属性和方法,进行赋值,需要知道的是函数之间的复制是不存在引用的,所以方法之间就不存在引用了
           obj1[attr] = obj2[attr];
     }
}

这种继承方式叫做拷贝继承。(jquery也是采用拷贝继承extend)

2 类式继承(利用构造函数继承,一句话即可完成继承)

来看下面的代码:

function Aaa(){   //父类
    this.name = [1,2,3];
}    
Aaa.prototype.showName = function(){
    alert( this.name );
};
function Bbb(){ }//子类
Bbb.prototype = new Aaa(); 
//这句话覆盖了Bbb所有的原型,所以构造函数指向改变(这里不懂的话,参建之前的博客,JS面向对象之创建对象中讲到的constructor)
//这句话就可以让子类找到父类的方法和属性
var b1 = new Bbb();
b1.showName();//弹出[1,2,3]
alert(b1.constructor);//Aaa 可见构造函数指向变了 b1.name.push(4);// 改变b1.name var b2 = new Bbb(); alert(b2.name) // [1,2,3,4] 由此可见属性存在引用

我们通过看一个图看理解是怎么继承的:

Bbb.prototype = new Aaa(); 这句话,使得图上的a1和Bbb的原型指向了同一个地方,所以当指向b1.showName();这句的时候,它现在自己下寻找有没有这个方法,没有就通过原型链去原型下找,发现也没有,又通过原型链去父级那边找,最终就找到了。

不过通过注释可以看到,其实这种方法其实是存在一些问题的:

            1 构造函数指向问题      2 属性存在引用 

解决:1 修正构造函数指向  2 方法和属性(call)分开继承
代码如下:1 属性继承和拷贝继承一样,通过构造函数调用继承  2 方法继承,通过中间人来做到之继承方法(看注释应该能懂,也可以自己试着画原型链图理解)
function Aaa(){ //父类
this.name = [1,2,3];
}    
Aaa.prototype.showName = function(){
alert( this.name );
};
function Bbb(){   //子类
    Aaa.call(this);    //属性继承
}
var F = function(){}; //声明空的构造函数,中间媒介
F.prototype = Aaa.prototype;//把Aaa的原型赋给F,这个时候F会拥有Aaa原型下所有的方法
Bbb.prototype = new F();  //这个同上,Bbb会用于F的所有方法和属性,因为上一句复制F只是拥有了Aaa的方法,所以这里实质上Bbb拥有的也只是Aaa的方法
Bbb.prototype.constructor = Bbb; //修正指向问题
var b1 = new Bbb();
b1.name // [1,2,3] 
b1.constructor;//Bbb 指向正常
b1.name.push(4);
var b2 = new Bbb(); 
b2.name // [1,2,3]   属性互相不影响

3 原型继承(借助原型来实现对象继承对象)

var a = {
    name : \'小明\'
};

var b = cloneObj(a); 

b.name = \'小强\'; 
alert( b.name );//小强 会优先在自己的下面找name 
alert( a.name );//小明 
function cloneObj(obj){
      var F = function(){}; //声明一个构造函数
      F.prototype = obj; //F原型下拥有obj的方法和属性
      return new F(); // 返回声明通过F声明的对象,通过上一句知道,这个对象具有obj的方法和属性 
 }

 

 

 

以上就是三种继承方法,其实也有别的,后续可以继续补充,对于继承也许用的不是很多,但对理解JS语言还是很重要的。一起加油把。


 

以上是关于浅谈JS继承的主要内容,如果未能解决你的问题,请参考以下文章

浅谈面向对象和继承

浅谈js原型与原型链

ES6 浅谈class继承机制

浅谈Java三大特性之继承

浅谈JS的toString

从 Babel 转译过程浅谈 ES6 实现继承的原理