相信很多熟悉像c++,java面向对象语言的朋友们在开始接触javascript时都会有种迷失的感觉。都说javascript是基于对象而不是面向对象,那“基于”与“面向”到底有什么不同,这种机制体现在哪些方面,如何采用它所提供的机制建立面向对象的javascript。针对这些问题,本人查阅资料,整理如下,希望对大家有所帮助。(具备且仅具备基本的javascript知识即可)
1. 通过prototype属性建立面向对象的javascript
每个javascript对象都有一个内置的属性,名为prototype,用它来保存对另一个对象的引用,javascript就是利用这个引用来保存其父对象。所以,javascript通过链接机制来支持继承,这种继承结构更像是一种“has a”而不是“is a”关系。
当通过点记法引用对象的一个函数或属性时,会先从对象本身定义的函数或属性中去找,倘若没有,会从prototype所引用的对象(父对象)中寻找,如果找到则终止,倘若仍然没有找到,再从父对象的父对象中寻找,直到找到,或到达链顶仍然没有,返回undefined。
并且值得注意的是,prototype的引用可以在运行时动态更改,而不需要重新编译(基于文本,解释执行)。虽然对prototype这种继承机制褒贬不一,但其的确可以提供强大并且健壮的多态性。
下面用一个例子简单描述这种继承方式:
基类一:Vehicle
function Vehicle(){}
Vehicle.prototype.wheelCount=4;
Vehicle.prototype.capability=5;
Vehicle.prototype.refuel=function(){
return "refuel every 300 km";
}
Vehicle.prototype.mainTasks=function(){
return "for driving";
}
子类一:Car
function Car(){}
/*extends Vehicle*/
Car.prototype=new Vehicle();
/*overwrite below*/
Car.prototype.capability=4;
Car.prototype.refuel=function(){
return "refuel every 200 km";
}
Car.prototype.mainTasks=function(){
return "for driving to school, work...";
}
子类二:Bus
function Bus(){}
/*extends Vehicle*/
Bus.prototype=new Vehicle();
/*overwrite below*/
Bus.prototype.wheelCount=8;
Bus.prototype.capability=40;
Bus.prototype.mainTasks=function(){
return "for serving citizens";
}
使用(分别调用create*生成对象并予以描述):
function describe(vehicle){
var des="";
des = des + "Number of wheel: " + vehicle.wheelCount;
des = des + "\nCapability: " + vehicle.capability;
des = des + "\nRefuel(): " + vehicle.refuel();
des = des + "\nMainTasks(): " + vehicle.mainTasks();
alert(des);
}
function createVehicle(){
var vehicle = new Vehicle();
describe(vehicle);
}
function createCar(){
var car = new Car();
describe(car);
}
function createBus(){
var bus = new Bus();
describe(bus);
}
2. 隐蔽私有属性,提高安全性
细心的您一定注意到了上面的例子已经涵盖了继承和多态,但铁杆的OO Fans一定不会放过封装,因为这涉及到数据的安全性。针对这一问题,Douglas Crockford(http://www.crockford.com)提出了一种在javascript中创建私有属性的方法,大致如下:
a. 私有属性在构造函数中使用var关键字定义;
b. 私有属性只能由特权函数(privileged function)公用访问,此类函数就是在构造函数中用this关键字定义的函数。外部客户可以通过访问特权函数访问对象的私有属性。(类似于set get方法)
下面同样用例子来描述:
基类二:Vehicle
function Vehicle(){
var wheelCount = 4;
var capability = 5;
this.getWheelCount = function(){
return wheelCount;
}
/*other setter and getter functions omitted*/
……
this.refuel = function(){
return "refuel every 300 km";
}
this.mainTasks=function(){
return "for driving";
}
}
注意这里的两个属性都用var关键字所修饰,它们不再是公有,访问与修改它们必须通过调用相应的公有函数完成。倘若尝试直接使用,如vehicle.wheelCount会返回undefined。
3. javascript中基于类的继承
如果你不想使用在1中介绍的基于prototype的继承方法,那么你可以采用本节介绍的,通过一个通用脚本从一个对象继承属性和函数的方式达到你的目标。这里所谓的继承其实是将“父”对象的属性和函数简单复制到“子”对象,从而创建这种继承关系。
由Netscape的Bob Clary提出的这个通用函数如下:
function createInheritance(parent, child){
var property;
for(property in parent){
if(!child[property]){
child[property] = parent[property];
}
}
}
上面代码清晰易懂,再配以使用代码,就不用解释了:
var child = new Child();
createInheritance(new Parent(), child);
这样便可以把父对象中有,而子对象中没有的属性和函数复制到子对象中来。
4. 结合信息隐藏与新的继承方式
这里我们结合使用信息隐藏与3中介绍的新的继承方式重写开头的例子:
基类:同2中“基类二”代码(已实现隐藏)
子类一:Car
function Car(){
this.refuel=function(){
return "refuel every 200 km";
}
this.mainTasks=function(){
return "for driving to school, work...";
}
}
子类二:Bus
function Bus(){
this.mainTasks=function(){
return "for serving citizens";
}
}
注意这里的Car和Bus并没有wheelCount和capability属性,Bus还没有refuel函数。它们需要等待客户端代码赋予这些属性和函数,继承关系由客户端指定。
再来看客户端代码:
function createInheritance(parent, child){
var property;
for(property in parent){
if(!child[property]){
child[property] = parent[property];
}
}
}
function createCar(){
var car = new Car();
createInheritance(new Vehicle(), car);
car.setCapability(5);
describe(car);
}
function createBus(){
var bus = new Bus();
createInheritance(new Vehicle(), bus);
car.setCapability(40);
describe(bus);
}
funfunction describe(vehicle){
var des="";
des = des + "Number of wheel: " + vehicle.wheelCount;
des = des + "\nCapability: " + vehicle.capability;
des = des + "\nRefuel(): " + vehicle.refuel();
des = des + "\nMainTasks(): " + vehicle.mainTasks();
alert(des);
}
读到这里相信你已经有所体会javascript基于对象与面向对象的区别。
本文主要从Foundations of Ajax chapter5 整理而来,由于时间关系代码未经调试运行,目的只在于说明其意,还请海涵!
分享到:
相关推荐
浅析javascript原型继承机制,浅析javascript原型继承机制
javascript原型继承机制参考.pdf
javascript原型继承机制借鉴.pdf
javascript原型继承机制归类.pdf
Javascript继承机制原理 可以参考下
javascript原型继承机制[整理].pdf
JavaScript继承机制研究.pdf
JavaScript继承机制探讨及其应用.pdf
本文着重解析javascript类继承机制,让你从底层了解javascript是怎样实现“继承”这一概念的。
学完了Javascript类和对象的创建之后,现在总结一下Javascript继承机制的实现。Javascript并不像Java那样对继承机制有严格明确的定义,它的实现方式正如它的变量的使用方式那样也是十分宽松的,你可以设计自己的方法...
本文实例讲述了javascript继承机制。分享给大家供大家参考。具体分析如下: 初学javascript一般很难理解Javascript语言的继承机制它没有”子类”和”父类”的概念,也没有”类”(class)和”实例”(instance)的...
笔者历经多年javascript的开发,痛彻体会javascript面向对象编程的不便性,精心制作了一个类的定义与继承功能的js,实现了在javascript中对类的定义、继承、封装机制,主要功能特征包括: 一、 统一了类定义的语法...
选定基类后,就可以创建它的子类了。是否使用基类完全由你决定。有时,你可能想创建一个不能直接使用的基类,它只是用于给子类提供通用的函数...和其他功能一样,ECMAScript中实现继承的方式不止一种。这是因为JavaScr
继承是面向对象开发的又一个重要概念,它可以将现实生活的概念对应到程序逻辑中。...在JavaScript中没有专门的机制来实现类的继承,但可以通过拷贝一个类的prototype到另外一个类来实现继承等扥,看资料
这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式。最原始的继承实现方式就是对象冒充,下面着重...
说明继承机制最简单的方法是,利用一个经典的例子——几何形状。
JavaScript继承机制的实现,后期会有一些补充。