JavaScript的继承(1)
2014-03-24 22:39
274 查看
继承这个东西相信很多学过OO语言的人都知道。许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。而JS中函数没有签名,所以无法实现接口继承,只能实现实现继承。
而在JS中,主要是通过原型链实现继承。当然原型链也最好不要单独使用,由于原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型实现的。而问题就在于对象实例共享所有继承的属性和方法。
function A(){
this.person = ["Guo","Chen","Yao"];
}
function B(){
A.call(this);
}
var person1 = new B();
alert(person1.person); //"Guo,Chen,Yao"
代码中红色的部分就调用了父类型的构造函数。通过使用call()方法(call()与apply()方法说白了就是将函数绑定到另外一个对象上去运行),就会在B对象上执行A函数中定义的所有代码。这样,B的每一个实例都会具有自己的person属性的副本了。当然,如果要传递参数也是可以的,call函数有两个参数可以使用,第二个参数就是要在外部传入的参数。
function A(companyName){
this.companyName = companyName ;
this.employee = ["Bob","Mary","David"];
}
A.prototype.alertName = function(){
alert(this.companyName);
};
function B(companyName,address){
A.call(this,"companyName");
this.address = address;
}
B.prototype = new A();
B.prototype.constructor = B;
B.prototype.alertAddress = function(){
alert(this.address);
};
var company1 = new B("Csdn","Beijing");
alert(company1.employee); //"Bob","Mary","David"
company1.alertName(); //"Csdn"
company1.alertAddress();//"Beijing"
而在JS中,主要是通过原型链实现继承。当然原型链也最好不要单独使用,由于原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型实现的。而问题就在于对象实例共享所有继承的属性和方法。
1,经典继承
即在子类型构造函数的内部调用父类型构造函数。如下所示:function A(){
this.person = ["Guo","Chen","Yao"];
}
function B(){
A.call(this);
}
var person1 = new B();
alert(person1.person); //"Guo,Chen,Yao"
代码中红色的部分就调用了父类型的构造函数。通过使用call()方法(call()与apply()方法说白了就是将函数绑定到另外一个对象上去运行),就会在B对象上执行A函数中定义的所有代码。这样,B的每一个实例都会具有自己的person属性的副本了。当然,如果要传递参数也是可以的,call函数有两个参数可以使用,第二个参数就是要在外部传入的参数。
2,组合继承
这种继承方式是融合了原型链和经典继承的优点的一种继承方式。其中心思想就是使用原型链实现对原型属性和方法的继承,通过经典继承实现对实例属性的继承。如下:function A(companyName){
this.companyName = companyName ;
this.employee = ["Bob","Mary","David"];
}
A.prototype.alertName = function(){
alert(this.companyName);
};
function B(companyName,address){
A.call(this,"companyName");
this.address = address;
}
B.prototype = new A();
B.prototype.constructor = B;
B.prototype.alertAddress = function(){
alert(this.address);
};
var company1 = new B("Csdn","Beijing");
alert(company1.employee); //"Bob","Mary","David"
company1.alertName(); //"Csdn"
company1.alertAddress();//"Beijing"
相关文章推荐
- JavaScript继承方式详解
- Javascript实现继承的6种方式
- 深入理解javascript原型和闭包(6)——继承
- JavaScript面向对象编程:类定义、继承、接口实现
- javascript面向对象技术之继承
- JavaScript 超类与子类 继承
- javascript 面向对象(实现继承的几种方式)
- JavaScript中的Java式继承
- JavaScript继承机制
- JavaScript中一个对象如何继承另外一个对象
- Javascript 面向对象二:继承
- javascript继承实现方法(转)
- javascript 构造函数继承
- Javascript继承机制详解
- JavaScript学习总结(二十)——Javascript非构造函数的继承
- JavaScript中的继承方式
- JavaScript中继承(三) -- 组合继承
- JavaScript五种继承方式
- Javascript面向对象编程:继承
- javascript实现继承的简单实例