日期:2014-05-16  浏览次数:20325 次

JS 定义类或对象

本来想就JavaScript如何定义类或对象生成写篇文章,但是经过仔细比较,还是在w3school有篇高级教程中讲得更加合理,于是就直接将文章转帖到这里。

更加内容参见w3school:http://www.w3school.com.cn/js/pro_js_object_defining.asp 。

注:ECMAScript即JavaScript核心。

?

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象。

ECMAScript 拥有很多创建对象或类的方法。

工厂方式
原始的方式
因为对象的属性可以在对象创建后动态定义,所有许多开发者都在 JavaScript 最初引入时编写类似下面的代码:

Js代码?
var oCar = new Object;??
oCar.color = "blue";??
oCar.doors = 4;??
oCar.mpg = 25;??
oCar.showColor = function() {??
? alert(this.color);??
};??

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
? alert(this.color);
}; TIY

在上面的代码中,创建对象 car。然后给它设置几个属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。执行这段代码后,就可以使用对象 car。

不过这里有一个问题,就是可能需要创建多个 car 的实例。

解决方案:工厂方式
要解决该问题,开发者创造了能创建并返回特定类型的对象的工厂函数(factory function)。

例如,函数 createCar() 可用于封装前面列出的创建 car 对象的操作:

Js代码?
function createCar() {??
? var oTempCar = new Object;??
? oTempCar.color = "blue";??
? oTempCar.doors = 4;??
? oTempCar.mpg = 25;??
? oTempCar.showColor = function() {??
??? alert(this.color);??
? };??
? return oTempCar;??
}??
?
var oCar1 = createCar();??
var oCar2 = createCar();??

function createCar() {
? var oTempCar = new Object;
? oTempCar.color = "blue";
? oTempCar.doors = 4;
? oTempCar.mpg = 25;
? oTempCar.showColor = function() {
??? alert(this.color);
? };
? return oTempCar;
}

var oCar1 = createCar();
var oCar2 = createCar(); TIY

在这里,第一个例子中的所有代码都包含在 createCar() 函数中。此外,还有一行额外的代码,返回 car 对象(oTempCar)作为函数值。调用此函数,将创建新对象,并赋予它所有必要的属性,复制出一个我们在前面说明过的 car 对象。因此,通过这种方法,我们可以很容易地创建 car 对象的两个版本(oCar1 和 oCar2),它们的属性完全一样。

为函数传递参数
我们还可以修改 createCar() 函数,给它传递各个属性的默认值,而不是简单地赋予属性默认值:

Js代码?
function createCar(sColor,iDoors,iMpg) {??
? var oTempCar = new Object;??
? oTempCar.color = sColor;??
? oTempCar.doors = iDoors;??
? oTempCar.mpg = iMpg;??
? oTempCar.showColor = function() {??
??? alert(this.color);??
? };??
? return oTempCar;??
}??
?
var oCar1 = createCar("red",4,23);??
var oCar2 = createCar("blue",3,25);??
?
oCar1.showColor();????? //输出 "red"??
oCar2.showColor();????? //输出 "blue"??

function createCar(sColor,iDoors,iMpg) {
? var oTempCar = new Object;
? oTempCar.color = sColor;
? oTempCar.doors = iDoors;
? oTempCar.mpg = iMpg;
? oTempCar.showColor = function() {
??? alert(this.color);
? };
? return oTempCar;
}

var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);

oCar1.showColor();??//输出 "red"
oCar2.showColor();??//输出 "blue" TIY

给 createCar() 函数加上参数,即可为要创建的 car 对象的 color、doors 和 mpg 属性赋值。这使两个对象具有相同的属性,却有不同的属性值。

在工厂函数外定义对象的方法
虽然 ECMAScript 越来越正式化,但创建对象的方法却被置之不理,且其规范化至今还遭人反对。一部分是语义上的原因(它看起来不像使用带有构造函数 new 运算符那么正规),一部分是功能上的原因。功能原因在于用这种方式必须创建对象的方法。前面的例子中,每次调用函数 createCar(),都要创建新函数 showColor(),意味着每个对象都有自己的 showColor() 版本。而事实上,每个对象都共享同一个函数。

有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避免这个问题:

Js代码?
function showColor() {??
? alert(this.color);??
}??
?
function createCar(sColor,iDoors,iMpg) {??
? var oTempCar = new Object;??
? oTempCar.color = sColor;??
? oTempCar.doors = iDoors;??
? oTempCar.mpg = iMpg;??
? oTempCar.showColor = showColor;??
? return oTempCar;??
}??
?
var oCar1 = createCar("red",4,23);??
var oCar2 = createCar("blue",3,25);??
?
oCar1.showColor();????? //输出 "red"??
oCar2.showColor();????? //输出 "blue"??

function showColor() {
? alert(this.color);
}

function createCar(sColor,iDoors,iMpg) {
? var oTempCar = new Object;
? oTempCar.color = sColor;
? oTempCar.doors = iDoors;
? oTempCar.mpg = iMpg;
? oTempCar.showColor = showColor;
? return oTempCar;