论坛首页 Web前端技术论坛

javascript中定义类的几种方法

浏览 2366 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-09-02  

在javascript中有几种定义类的方式,以下分别列出并说明了其存在的问题,其中Hybrid constructor/prototype方式是推荐采用的方式。

1. Factory

定义一个工厂函数,函数中创建新的对象,定义属性及方法,然后返回该对象。
以下是一个工厂函数的例子:
function createCar() {
	var oTempCar = new Object;
	oTempCar.color = "red";
	oTempCar.doors = 4;
	oTempCar.mpg = 23;
	oTempCar.showColor = function () {
		alert(this.color)
	};
	
	return oTempCar;
}

创建新对象的代码是这样的:
var oCar1 = createCar();
var oCar2 = createCar();

这样存在一个问题,就是每次创建新对象时,都会产生一个新的方法showColor的副本,因此可以这样写:
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;
}

2. Constructor

构造器的写法与工厂方法类似,但是可以使用new创建对象,示例代码如下:
function Car(sColor, iDoors, iMpg) {
	this.color = sColor;
	this.doors = iDoors;
	this.mpg = iMpg;
	this.showColor = function () {
		alert(this.color)
	};
}

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

对于方法showColor存在同样的问题,也可以用同样的方法解决该问题。

3. Prototype

可以利用Object的prototype属性定义类,以下是示例代码:
function Car() {
}

Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.mpg = 23;
Car.prototype.showColor = function () {
	alert(this.color);
};

var oCar1 = new Car();
var oCar2 = new Car();

使用这种方式新创建的对象的属性和方法指向相同的实例,对于方法这解决了创建不同副本的问题,但是对于属性,这是一个严重问题,因为修改一个对象的属性就会同时影响其他对象的属性。所以要使用constructor/prototype的混合方法。

4. Hybrid constructor/prototype

这种方式是使用prototype方式定义方法,方法以外的元素用构造器的方式定义,示例代码如下:
function Car(sColor, iDoors, iMpg) {
	this.color = sColor;
	this.doors = iDoors;
	this.mpg = iMpg;
	this.drivers = new Array("Mike", "Sue");
}

Car.prototype.showColor = function () {
	alert(this.color);
};

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

5. Dynamic prototype

这种方式与java很相似,示例代码如下:
function Car(sColor, iDoors, iMpg) {
	this.color = sColor;
	this.doors = iDoors;
	this.mpg = iMpg;
	this.drivers = new Array("Mike", "Sue");
	
	if (typeof Car._initialized == “undefined”) {
		Car.prototype.showColor = function () {
			alert(this.color);
		};
		Car._initialized = true;
	}
}
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics