转自：360图书馆 时间：2016-9-26
原标题：使用Javascript，可以实现多层继承
1.javascript的继承1：多重继承
有3个原型，分别处理学生的姓名，性别和年龄（当然是比较复杂的处理），而我们需要实例化的就是一个学生的原型，于是多重继承诞生了，我们看代码：
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也能很快定义到功能模块，修改其中某一个对其他没有影响。
多重继承小记
此法实现多重继承，是利用call/apply实现多重继承，核心就是用Function类的call/apply方法去绑定新的类，使新的类实例化后的对象继承了该属性及方法
/*-------利用call/apply实现多重继承--------*/
//基类1
function Base1(){
this.name = "base1";
this.getName = function(){
alert(this.name);
}
};
//基类2
function Base2(){
this.act = "eating";
this._item = "banana";
this.saying = function(){
alert("I'm "+this.act+" the "+this._item+"!");
};
};
//利用call/apply多重继承
function Extend(){
//arguments为传进的参数伪数组
for(var i=0; i
arguments[i].call(this);
}
}
//实例化一个对象,并继承自Base1,Base2
var myClass = new Extend(Base1,Base2);
myClass.getName();
myClass.saying();
复制代码
但它的缺点是基类的方法只能定义在类中，这样在每次实例化的时候都会创建该方法，造成多余内存占用
2、javascript的继承2：原型链多层继承
原型链就是利用prototype属性来实现的，例如：原型1.prototype = new 原型2（） ;
这样就可以利用实例化1 = new 原型1（）；
实例化1就可以完全访问所有的原型1和原型2的方法，这里要注意在实例化时不要向原型函数传入参数，参数需要在实例化以后再定义。
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者齐上阵。
针对多余内存被占用，所以第二种方法是用prototype原型的形式来完成多重继承
/*-------利用prototype实现多重继承--------*/
//基类1
function Base1(){
this.name = "Base1";
//动态原型模式
if(typeof this.getName !== "function"){
Base1.prototype.getName = function(){
alert(this.name);
};
}
}
//基类2
function Base2(){
this.act = "eating";
this._item = "banana";
//动态原型模式
if(typeof this.getName !== "function"){
Base2.prototype.saying=function(){
alert("I'm "+this.act+" the "+this._item+"!");
};
}
};
//利用prototype多重继承;
function extend(){
var Class = function(){};
for(var i=0; i
var base = new arguments[i]();
for(var j in base){
Class.prototype[j] = base[j];
}
};
return Class;
}
//创建一个类并继承base1,base2类
var MyClass = extend(Base1,Base2);
//实例化一个对象
var myClass = new MyClass();
myClass.getName();
myClass.saying();
复制代码
不过，用prototype继承还有缺点，就是无法传递参数
3.javascript的继承3：混合模式继承
我们可以做如下2个实验，以下2个代码块充分说明了以上2种模式的优劣，其实代码块2已经是混合模式了。
代码块1：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：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方式来进行继承的话又不能在实例化的同时传参，所以两者混合模式是最常用的方式，我们看代码：
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开发，频繁的实例化原型，可以提高运行效率。
使用了两种混合的方法，拥有各自的优点
/*-------混合型实现多重继承--------*/
//基类1
function Base1(name){
this.name = name;
//动态原型扩展
if(typeof this.getName !== "function"){
Base1.prototype.getName = function(){
alert(this.name);
};
}
}
//基类2
function Base2(act,_item){
this.act = act;
this._item = _item;
//动态原型扩展
if(typeof this.saying!== "function"){
Base2.prototype.saying=function(){
alert("I'm "+this.act+" the "+this._item+"!");
};
}
};
//原型多重继承
function prototypeExtend(){
for(var i=0; i
var base = new arguments[i]();
for(var j in base){
this.prototype[j] = base[j];
}
}
}
//定义一个类，内部用call/apply继承
function MyClass(name,act,_item){
Base1.call(this,name);
Base2.apply(this,[act,_item]);
};
//多重继承类的原型方法
prototypeExtend.apply(MyClass,[Base1,Base2]);
//实例化
var my = new MyClass("Der","eating","apple");
my.saying();
my.getName();
复制代码
上面的方法构造出来的实例的属性都无法实现私有，另一种函数化返回对象来实现继承模式，则可以很好的利用闭包在函数内部实现私有变量。
核心代码如下：
//基类
var Der = function(o){
//私有变量
var name = o.name;
var age = o.age;
var action = function(){
age++;
};
//创建一个对象,可访问内部私有变量
var that = {
saying:function(){
action();
return "I'm "+name+",i am "+age+" years old!";
}
};
//返回对象
return that;
};
//子类
var Panda = function(o){
//创建一个对象继承自Der
var that = Der(o);
//私有变量(差异化设置)
var fullName = o.fullName;
that.getFullName = function(){
return fullName;
};
//返回一个对象
return that;
};
//实例化
var der = Der({"name":"der","age":26});
document.writeln(der.saying()+"
");
var panda = Panda({"name":"panda","fullName":"zhengPanda","age":25});
document.writeln(panda.saying()+"
");
document.writeln(panda.getFullName()+"
");
复制代码
运行代码：
函数化对象继承(带私有变量)
//基类
var Der = function(o){
//私有变量
var name = o.name;
var age = o.age;
var action = function(){
age++;
};
//创建一个对象,可访问内部私有变量
var that = {
saying:function(){
action();
return "I'm "+name+",i am "+age+" years old!";
}
};
//返回对象
return that;
};
//子类
var Panda = function(o){
//创建一个对象继承自Der
var that = Der(o);
//私有变量(差异化设置)
var fullName = o.fullName;
that.getFullName = function(){
return "my fullname is "+fullName;
};
//返回一个对象
return that;
};
//实例化
var der = Der({"name":"der","age":26});
document.writeln(der.saying()+"
");
var panda = Panda({"name":"panda","fullName":"zhengPanda","age":25});
document.writeln(panda.saying()+"
");
document.writeln(panda.getFullName()+"
");
复制代码
补充一下：
对于一些私有方法，比如只想给类调用不想给实例调用的方法可以写在 function 内部：
例如：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方法都会占用额外内存，所以我们可以这样改写：
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方法并没有因为多次实例化而浪费内存。
网友评论