本文详细解析JavaScript中定义类的四种经典方法:工厂模式、构造函数模式、原型模式以及混合构造函数/原型模式,并介绍动态原型方法。通过对比各模式的代码实现与优缺点,帮助开发者理解对象创建机制,选择适合项目需求的类定义方式,避免内存浪费或原型污染问题。
具体实现代码如下所示:
/*
工厂方式:创建并返回特定类型的对象第一种是工厂方式,其核心在于创建一个工厂函数(factory function),该函数负责创建并返回特定类型的对象实例。
*/
function createCar(color,doors,mpg){
var tempCar = new Object;
tempCar.color = color;
tempCar.doors = doors;
tempCar.mpg = mpg;
tempCar.showCar = function(){
alert(this.color + " " + this.doors);
}
return tempCar;
}
/*
构造函数方式:看似相似的函数结构第二种是构造函数方式,其语法结构看似与工厂函数相似,但在使用时有显著区别。
*/
function Car(color,doors,mpg){
this.color = color;
this.doors = doors;
this.mpg = mpg;
this.showCar = function(){
alert(this.color);
};
}
/*
原型方式:利用 prototype 属性创建新对象第三种是原型方式,该方法充分利用了对象的 prototype 属性。我们可以将 prototype 视为创建新对象时所依赖的原型模板。
*/
function Car(color,doors,mpg){
this.color = color;
this.doors = doors;
this.mpg = mpg;
this.drivers = new Array("nomad","angel");
}
Car.prototype.showCar3 = function(){
alert(this.color);
};
/*
混合构造函数/原型方式:非函数与函数属性的分离第四种是混合的构造函数/原型方式。这种模式结合了前两者的优点:使用构造函数来定义对象的所有非函数属性,而利用原型方式来定义对象的函数属性(即方法)。
*/
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);
};
/*
动态原型方法:通过标志位控制方法赋予最后一种称为动态原型方法。它同样在构造函数内定义非函数属性,并通过原型属性定义函数属性。其唯一区别在于赋予对象方法的位置不同,即通过一个标志位来控制方法的初始化。
*/
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;
}
} //该方法使用标志( _initialized )来判断是否已给原型赋予了任何方法。