首页 > 代码库 > js中的prototype和基于prototype的继承总结
js中的prototype和基于prototype的继承总结
与其他编译语言的继承相比,javascript也有一套继承实现方式,即使用prototype原型及其链的方式。
1、我们先用一个简单的例子先理解原型链,
function superClass(){
this.value = "http://www.mamicode.com/super";
}
superClass.prototype.getSuperValue = http://www.mamicode.com/function(){
return this.value;
}
function subClass(){
this.subClassValue = "http://www.mamicode.com/sub";
}
subClass.prototype = new superClass();
subClass.prototype.getSubValue = http://www.mamicode.com/function(){
return this.subClassValue;
}
var s = new subClass();
alert(s.getSuperValue());
我们声明了俩个构造方法:subClass 和superClass,每个构造函数都有一个原型属性(本地无法访问)指向该构造方法的原型对象,
原型对象有个constructor属性指向构造方法,实例中prototype属性指向原型。我们还知道所有对象都是继承
Object的,其实在每个构造方法的原型对象中还有一个指向Object.prototype的属性,object.prototype中的constructor又指向
object,这样就形成了一个prototype链。
现在我们来分析subClass.prototype = new superClass(); subClass.prototype 指向superClass的实例意味着什么呢,意味着
subClass.prototype指向了superClass的prototype,所以就能访问到原型中的属性和方法。
这时的弹出框消息为"super". 这下应该就很明白为什么了吧。
2、还有一种实现继承的方式,就是借用构造方法
function superClass(){
this.name = [‘Eason‘]
}
function subClass(){
superClass.call(this);//实现继承
}
var sub = new subClass();
alert(sub.name);
sub.name.push(‘hou‘);
alert(sub.name)
3、组合继承:就是将原型链继承还构造函数继承结合在一起,使用原型链对原型属性和方法的继承,使用构造方法来实现对实例属性的继承
原型继承的缺点:原型中定义的属性被多个实例共享
构造方法的确定:方法都在构造方法中定义,复用率几乎为0
function superClass(name){
this.name = name;
this.color= [‘red‘,‘yellow‘];
}
superClass.prototype.sayName = function(){
return this.name;
}
function subClass(name,age){
superClass.call(this,name);
this.age = age;
}
subClass.prototype = new superClass();
subClass.prototype.sayAge = function(){
return this.age;
}
var sub = new subClass(‘Eason‘,26);
alert(sub.color);
alert(sub.sayName());
alert(sub.sayAge());
4、还有一种比较常用的就是原型是继承,思想就是原型可以基于已有的对象创建新的对象,
我们先构造一个工具方法:
function createObj(o){
function fun(){
}
fun.prototype = o;
return new fun();
}
用法:
var obj = {
name : ‘Eason‘,
}
var o = createObj(obj);
alert(o.name);
o.name = ‘hou‘;
alert(o.name);
通过上面的例子可以对prototype的基本用法有个简单的了解,如果各位看客有什么意见请留言,谢谢!
本文出自 “Eason's hcc” 博客,请务必保留此出处http://hcc0926.blog.51cto.com/172833/1559339
js中的prototype和基于prototype的继承总结