JavaScript五种对象创建模式详解:从工厂到动态原型

作者:闭包旅人

时间:2026-10-23

浏览:348

本文系统梳理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;
}

从而保证创建该对象的实例时,属性的方法不会被重复创建

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章