JavaScript五种对象创建模式详解：从工厂到动态原型
本文系统梳理JavaScript中五种经典的对象创建模式，包括工厂模式、构造函数模式、原型模式、混合模式及动态原型模式。通过代码示例对比各模式的实现细节与优缺点，重点解析推荐使用的混合模式与动态原型模式，帮助开发者理解不同场景下的最佳实践。
JS工厂模式
第一种模式：JS工厂模式
var lev=function(){
return "啊打";
};
function Parent(){
var Child = new Object();
Child.name="李小龙";
Child.age="30";
Child.lev=lev;
return Child;
};
var x = Parent();
alert(x.name);
alert(x.lev());说明：
1. 在函数内部定义对象，并为其设置各种属性。虽然属性值可以是方法，但建议将方法定义在函数外部，以避免每次调用时重复创建该方法实例。
2. 调用该对象时，应使用 `var x = Parent()` 而非 `var x = new Parent()`。前者被称为工厂经典方式，后者称为混合工厂方式；使用 `new` 关键字可能引发诸多问题，因此不推荐使用 `new` 方式创建此类对象。
3. 在函数执行结束时，返回该对象实例。
4. 尽管不推荐在实际开发中采用这种方式创建对象，但理解其原理仍具学习价值。
JS构造函数模式
第二种模式：JS构造函数模式
var lev=function(){
return "啊打";
};
function Parent(){
this.name="李小龙";
this.age="30";
this.lev=lev;
};
var x =new Parent();
alert(x.name);
alert(x.lev());说明：
1. 与工厂模式相比，构造函数模式无需在函数内部手动创建对象，而是使用 `this` 关键字指代当前对象，且函数无需显式返回对象。
2. 同工厂模式一样，虽然属性的值可以为方法，仍建议将该方法定义在函数外部。
3. 同样的，不推荐使用这种方式创建对象，但仍需要了解其机制。
JS原型模式
第三种模式：JS原型模式
var lev=function(){
return "啊打";
};
function Parent(){ };
Parent.prototype.name="李小龙";
Parent.prototype.age="30";
Parent.prototype.lev=lev;
var x =new Parent();
alert(x.name);
alert(x.lev());说明：
1. 函数内部不定义任何属性。
2. 利用 `prototype` 属性来定义对象的属性和方法。
3. 同样的，不推荐使用这样方式创建对象。
混合模式与动态原型模式
第四种模式：构造函数+原型的JS混合模式（推荐）
function Parent(){
this.name="李小龙";
this.age=32;
};
Parent.prototype.lev=function(){
return this.name;
};
var x =new Parent();
alert(x.lev());说明：
1. 该模式是指混合搭配使用构造函数方式和原型方式。
2. 将所有非方法类型的属性定义在函数内部（采用构造函数方式），而将所有属性值为方法的属性利用 `prototype` 在函数外部定义（采用原型方式）。
3. 推荐使用这样方式创建对象，这样做有好处和为什么不单独使用构造函数方式和原型方式，由于篇幅问题这里不予讨论
第五种模式：构造函数+原型的动态原型模式（推荐）
function Parent(){
this.name="李小龙";
this.age=32;
if(typeof Parent._lev=="undefined"){
Parent.prototype.lev=function(){
return this.name;
}
Parent._lev=true;
}
};
var x =new Parent();
alert(x.lev());说明：
1. 动态原型方式可以理解为混合构造函数，原型方式的一个特例
2. 该模式中,属性为方法的属性直接在函数中进行了定义，但是因为
if(typeof Parent._lev=="undefined"){
Parent._lev=true;
}从而保证创建该对象的实例时，属性的方法不会被重复创建
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38