关于javascript的继承

发表于 | 更新于 | 分类于 | 评论数：

关于继承的一些想法和效率提高，代码很简单，但是很能说明问题！在实际项目中应用很多

1、多重继承

有3个原型，分别处理学生的姓名，性别和年龄（当然是比较复杂的处理），而我们需要实例化的就是一个学生的原型，于是多重继承诞生了，我们看代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var s1 = function(name){
 this.name = name;
 }
var s2 = function(sex){
 this.sex = sex;
 }
var s3 = function(age){
 this.age = age;
 }
var Student = function(name, sex, age, score){
 s1.call(this, name); 
 s2.call(this, sex); 
 s3.call(this, age); 
 this.score = score; 
 }
Student.prototype.constructor = Student;
var s = new Student('jack', 'male', '12', '100');

alert(s.name);   //jack
alert(s.sex);     //male
alert(s.age);    //12
alert(s.score);   //100

这样我们就可以根据各个不同的功能模块分不同程序员独立开发，最后合并起来，实现了多重继承。

当然如果参数过多的话可以使用object参数来做。而且各个功能模块耦合度比较小，出现BUG也能很快定义到功能模块，修改其中某一个对其他没有影响。

2、原型链多层继承

原型链就是利用prototype属性来实现的，例如：原型1.prototype = new 原型2（） ;

这样就可以利用 实例化1 = new 原型1（）；

实例化1就可以完全访问所有的原型1和原型2的方法，这里要注意在实例化时不要向原型函数传入参数，参数需要在实例化以后再定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var s1 = function(){
 }
s1.prototype.getName = function(){alert(this.name)};
var s2 = function(){
 }
s2.prototype =new s1();
s2.prototype.constructor = s2;
s2.prototype.getSex = function(){alert(this.sex)};
var s3 = function(){
 }
s3.prototype = new s2();
s3.prototype.constructor = s3;
s3.prototype.getAge = function(){alert(this.age)};
var s = new s3();
s.name = 'jack';
s.sex = 'male';
s.age = '22';
s.getName();  //jack
s.getSex();    //male
s.getAge();    //22

这样通过prototype也实现了多层继承，不过个人感觉没有上面多重继承来的直观。不过最好的办法是2者齐上阵。

2、混合模式继承

我们可以做如下2个实验，以下2个代码块充分说明了以上2种模式的优劣，其实代码块2已经是混合模式了。

代码块1：

1
2
3
4
5
6
7
8
9
var s1 = function(name){
 this.name = name;
 this.getName = function(){
  alert(this.name);
 }
}
var o1 = new s1('jack');
var o2 = new s1('marry');
alert(o1.getName === o2.getName);   //false;

代码块2：

1
2
3
4
5
6
7
8
9
var s1 = function(name){
 this.name = name;
}
s1.prototype.getName = function(){
  alert(this.name);
 }
var o1 = new s1('jack');
var o2 = new s1('marry');
alert(o1.getName === o2.getName);   //true;

我们来分析一下结果，第一种情况，将s1的getName方法存放在实例中，这样以后每实例化一个新对象都将生成不同的getName()方法，而如果将getName()方法添加到s1原型的原型链中后（也有人称之为反射，借鉴与JAVA），每实例化一个新的对象调用的都还是同一个getName()方法，这样正是我们所需要的，可以更少的占用内存资源提高运行效率。

如果全部使用prototype方式来进行继承的话又不能在实例化的同时传参，所以两者混合模式是最常用的方式，我们看代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var s1 = function(name){
 this.name = name;
 }
s1.prototype.getName = function(){alert(this.name)};
var s2 = function(sex){
 this.sex = sex;
 }
s2.prototype =new s1();
s2.prototype.getSex = function(){alert(this.sex)};
var s3 = function(age){
 this.age = age
 }
s3.prototype = new s2();
s3.prototype.getAge = function(){alert(this.age)};

var s4 = function(name, sex, age){
 s1.call(this, name);
 s2.call(this, sex);
 s3.call(this, age);
 }
s4.prototype = new s3();
s4.prototype.constructor = s4;
var s = new s4('jack', 'male', '25');
s.getName();   //jack
s.getSex();    //male
s.getAge();    //25

这样3重常用的继承方法介绍完毕了，混合模式适合一些比较大型javascript开发，频繁的实例化原型，可以提高运行效率。

补充一下：

对于一些私有方法，比如只想给类调用不想给实例调用的方法可以写在 function 内部：

例如：

1
2
3
4
5
6
7
8
9
var s1 = function(){
 var a = function(){
  ...
 }
 this.b = function(){}
}
var x = new s1();  
var y = new s1();
alert(x.b === y.b) //false

这样y和x都无法直接调用a这个函数。但是这样会造成内存浪费。每实例化一个 s1,函数a和this.b方法都会占用额外内存，所以我们可以这样改写：

1
2
3
4
5
6
7
8
9
10
11
var s1 =function(){
function a(){
 ...
}
    return function(){
        this.b = function(){}
        }
}
var x = new s1();  
var y = new s1();
alert(x.b === y.b) //true;

大功告成了，这样a方法可以拿到实例化时的参数和运行环境，而b方法并没有因为多次实例化而浪费内存。