javascript是基于对象的编程语言,它本身是没有继承的,那么怎么来模拟实现一下javascript的继承呢?刚刚学习了几个方法,下面做一下总结。
一、原型的方式
主要思想就是让子类的原型对象等于父类的实例
// 父类构造函数 sup
function Sup(name){
this.name = name;
}
// 父类的原型对象
Sup.prototype = {
constructor : Sup ,
sayName : function(){
alert(this.name);
}
};
// 子类构造函数 sub
function Sub(age){
this.age = age ;
}
//如果我们让子类的原型对象 等于父类的实例 (实现了js的继承)
//1 显然此时的原型对象将包含一个指向另一个原型的指针
// sup的实例对象 和 sup的原型对象 有一个关系
//2 相应的另一个原型中也包含着一个指向另一个构造函数的指针
// 子类的原型对象的构造器变成了 父类的构造器
Sub.prototype = new Sup('张三');
var sub1 = new Sub();
sub1.sayName();//张三
通过代码可以看出,让子类的原型对象等于父类的实例可以实现子类继承父类的属性,方法,原型。
二、类继承的方式
也可叫做函数借用的方式
原型继承的方式有个缺点,继承时需要在父类的实例中添加参数,但是我们希望,子类的继承能像java里面那样直接在子类的形参中定义父类的参数。
所以我们就想到了call和apply两个方法,关于这两个方法的用法大家可以参考http://blog.csdn.net/hanxueyu666/article/details/51433541
下面我们就来看看代码是怎么实现的吧。
// 类继承(只继承模版,不继承原型对象) (借用构造函数的方式继承)
/*
// 父类
function Person(name, age){
this.name = name ;
this.age = age ;
}
// 父类的原型对象属性
Person.prototype.id = 10 ;
// 子类
function Boy(name , age , sex){
// call apply
Person.call(this,name,age);
this.sex = sex ;
}
var b = new Boy('张三' , 20 , '男');
alert(b.name);//张三
alert(b.age);//20
alert(b.sex);//男
alert(b.id); //indefined 父类的原型对象并没有继承
看看,这样就可以直接在子类中添加参数了,是不是看着舒服多了?当然代码中call也可以改成apply,大家可以自己动手该一下。当然类继承的模式也有一个缺点,就是不能继承父类的原型。那么怎么才能既可以在子类中直接添加参数,又可以继承父类的原型对象呢?且看下面的分解。
三、原型继承和类继承的组合方式
为了解决上面的问题,我们可以把两种继承模式组合起来使用,直接上代码
// 原型继承+借用构造函数继承 = 混合继承
// 父类
function Person(name, age){
this.name = name ;
this.age = age ;
}
// 父类的原型对象属性
Person.prototype.id = 10 ;
Person.prototype.sayName = function(){alert(this.name);};
// 子类
function Boy(name , age , sex){
// call apply
Person.call(this,name,age); // 1 借用构造函数继承 继承父类的模版
this.sex = sex ;
}
// 2 原型继承
// 只剩下 父类的实例 和 父类的原型对象的关系了
Boy.prototype = new Person(); //继承父类的原型对象
var b = new Boy('李四' , 20 , '男');
alert(b.name);
alert(b.sex);
b.sayName();
看看这样是不是就比较完美了呢?好了收官,该吃午饭了~
吃饭回来,有学了一点,现在补充一下
四、模拟extjs底层继承方式
方法三看起来好像很不错的样子,其实也是有弊端的,就是,结合了两种方法,也就是连续创建了两次父类对象,这样是比较浪费资源的,怎么样才能避免这种情况发生呢?我们可以在原型继承的时候,运用一个空函数作为转接,让子类的原型直接继承父类的原型。还是直接上代码来的清楚
<span style="white-space:pre"> </span>function extend(sub ,sup){
// 目的: 实现只继承父类的原型对象
var F = new Function(); // 1 创建一个空函数 目的:空函数进行中转
F.prototype = sup.prototype; // 2 实现空函数的原型对象和超类的原型对象转换
sub.prototype = new F(); // 3 原型继承
sub.prototype.constructor = sub ; // 4还原子类的构造器
//保存一下父类的原型对象: 一方面方便解耦 另一方面方便获得父类的原型对象
sub.superClass = sup.prototype; //自定义一个子类的静态属性 接受父类的原型对象
//判断父类的原型对象的构造器 (加保险)
if(sup.prototype.constructor == Object.prototype.constructor){
sup.prototype.constructor = sup ; //手动欢迎父类原型对象的构造器
}
}
// 混合继承:原型继承和借用构造函数继承
function Person( name , age){
this.name = name ;
this.age = age ;
}
Person.prototype = {
constructor: Person ,
sayHello: function(){
alert('hello world!');
}
};
function Boy(name , age , sex){
//call 绑定父类的模版函数 实现 借用构造函数继承 只复制了父类的模版
Boy.superClass.constructor.call(this , name , age);
this.sex = sex ;
}
//原型继承的方式: 即继承了父类的模版 又继承了父类的原型对象
//Boy.prototype = new Person();
// 只继承一遍父类的原型对象
extend(Boy , Person);
// 给子类加了一个 原型对象的方法
Boy.prototype.sayHello = function(){
alert('hi javascript!');
}
var b = new Boy('张三' , 20 , '男');
alert(b.name);
alert(b.sex);
b.sayHello();//调用了boy的方法,boy重写了父类的方法
Boy.superClass.sayHello.call(b);//也可以这样来跨过子类方法来调用父类方法
//alert(Boy.superClass.constructor);
// 混合继承的缺点: 3件事 : 继承了父类的2次模版 , 继承了一次父类的原型对象
// extend方法 2件事: 继承1次父类的模版 继承一次父类的原型对象
以上来源于尚学堂javascript学习总结。