JavaScript 对象创建模式详解：工厂、构造函数与原型
作者：拾光时间：2026-10-28 18:27:32浏览：416
本文深入解析 JavaScript 中创建对象的五种核心模式：工厂方式、构造函数方式、原型方式、混合构造函数/原型方式以及动态混合方式。通过具体代码示例，对比分析各模式在属性初始化、方法复用及资源消耗上的差异，帮助开发者根据实际需求选择最优的面向对象设计策略。
每个函数对象都具备一个 length 属性，该属性用于指示该函数期望接收的参数数量。
相关代码示例如下：
<html>
<head>
<script type="text/javascript">
var add =function(num1,num2,num3){
alert(num1+num2+num3);
}
alert(add.length);
</script>
</head>
<body>
</body>
</html>JavaScript 对象创建模式概述
接下来探讨 JavaScript 中面向对象的几种创建方式。
我们的目标是：
构建一个 order 对象。该对象需包含三个属性：日期、金额和提交人；同时包含一个方法，用于显示格式化的字符串：“XX在XXXX-XX-XX 提交了额度为:XXXX元的订单”。
工厂方式
一、工厂方式
具体实现代码如下：
<script type=text/javascript>
/*
工厂方式的核心在于通过函数返回对象，调用时无需使用 new 关键字生成新对象。
*/
function createOrder()//也可以构建带参数的工厂方法,根据传入的参数初始化对象数据.
{
var order = new Object();
order.Date = "1990-1-1";
order.Price = "3200";
order.Name = "Vince Keny";
order.Show = function()//将show方法放在工厂中,则分别为每个实例创造一个Show方法.浪费资源是此模式的弊端.
{
alert(this.Name + " 在 " + this.Date + " 提交了额度为 " + this.Price + " 元的订单.")
}
return order;
}
//使用工厂模式返回对象:
var order = createOrder();
//也可以这样使用,把工厂模式改造成"伪构造函数",因为在工厂中使用了new,所以创建对象时的new运算符将被忽律.
var order2 = new createOrder();
order.Show();
order2.Show();
</script>构造函数方式
二、构造函数方式
相关代码如下：
/*
构造函数方式在方法声明上与工厂方式类似，同样存在方法重复创建的问题，因此方法也可以提取出来。主要区别在于属性声明使用 this 关键字。
此外，必须使用 new 运算符来生成实例。
*/
function Order()
{
this.Date = "1990-1-1";
this.Price = "3200";
this.Name = "Vince Keny";
this.Show = function()
{
alert(this.Name + " 在 " + this.Date + " 提交了额度为 " + this.Price + " 元的订单.")
}
}
var order = new Order();
order.Show();原型方式
三、原型方式
实现代码如下：
/*
原型方式利用 prototype 属性进行定义。
*/
function Order()
{}
Order.prototype.Date = "1990-1-1";
Order.prototype.Price = "3200";
Order.prototype.Name = "Vince Keny";
Order.prototype.Show = function()
{
alert(this.Name + " 在 " + this.Date + " 提交了额度为 " + this.Price + " 元的订单.")
}
var order = new Order();
order.Show();混合构造函数/原型方式
四、混合构造函数/原型方式
代码示例如下：
/*
混合构造函数/原型方式结合了两者的优点：使用构造函数初始化属性字段，使用原型方式构造方法。
*/
function Order()
{
this.Date = "1990-1-1";
this.Price = "3200";
this.Name = "Vince Keny";
}
Order.prototype.Show = function().
{
alert(this.Name + " 在 " + this.Date + " 提交了额度为 " + this.Price + " 元的订单.")
}
var order = new Order();
order.Show();动态混合方式
五、动态混合方式
具体代码如下：
/*
动态混合方式与常规混合方式的区别在于方法的声明位置。该方法被声明在构造函数内部，这种结构更符合面向对象的设计原则。
*/
function Order()
{
this.Date = "1990-1-1";
this.Price = "3200";
this.Name = "Vince Keny";
if(typeof Order._initialized == "undefined")
{
Order.prototype.Show = function().
{
alert(this.Name + " 在 " + this.Date + " 提交了额度为 " + this.Price + " 元的订单.")
};
Order._initialized = true;
}
}
function Car(sColor,iDoors){
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDooes;
oTempCar.showColor = function (){
alert(this.color)
};
return oTempCar;
}
var oCar1 = new Car("red",4);
var oCar2 = new Car("blue",3);
oCar1.showColor(); //outputs "red"
oCar2.showColor(); //outputs "blue"作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58