JavaScript 定义类的四种经典方式解析

作者:闭包旅人

时间:2026-10-24

浏览:322

本文详细解析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 )来判断是否已给原型赋予了任何方法。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章