JavaScript创建类和对象的四种模式详解
本文详细解析JavaScript中创建类和对象的四种主要方法：原始对象字面量、工厂模式、构造函数模式以及动态原型模式。通过对比各模式在封装性、内存占用及代码复用方面的差异，重点阐述如何利用prototype属性实现方法共享，从而优化性能并提升代码结构。
JavaScript创建类和对象的四种模式详解
本文对JavaScript中创建类和对象的几种常见方式进行总结：
1、基础对象创建方式：
<script type="text/javascript">
var person = new Object();
person.name="Amy";
person.sex="Woman";
person.show=function(){
document.write("name is: "+this.name+" ; sex is:"+this.sex);
}
person.show();
</script>
对于熟悉面向对象编程的开发者而言，这种基础方式可能难以接受，因为其属性和方法的封装显得不够紧密。这种方式通过“对象名”加点号（.）来访问属性和方法，暗示这些成员属于该对象。例如，创建一个名为person的对象后，可以继续为其追加属性，如person.age=23。这种直观但松散的结构，常让习惯Java等强类型语言编程的人员感到不适。接下来我们将探讨如何对这种基础方式进行改进：
2、工厂模式（Factory Pattern）：
<script type="text/javascript">
function personFactory(name,age,sex){
var ob=new Object();
ob.name=name;
ob.age=age;
ob.sex=sex;
ob.show=function(){
document.write(ob.name+" "+ob.age+" "+ob.sex);
}
return ob;
}
var person=personFactory("Amy",21,"Woman");
person.show();
</script>
工厂模式在形式上更接近传统的类定义。通过personFactory函数对对象创建过程进行封装，并返回一个引用给person变量，从而获得一个已初始化的对象。然而，该模式仍存在缺陷：每次调用工厂函数创建新对象时，都会重新生成一个新的show()函数实例。既然这些方法功能相同，完全可以共享同一个函数引用。优化方案是将show函数提取到工厂外部，如下所示：
<script type="text/javascript">
function show(){
document.write(this.name+" "+this.age+" "+this.sex);
}
function personFactory(name,age,sex){
var ob=new Object();
ob.name=name;
ob.age=age;
ob.sex=sex;
ob.show=show;
return ob;
}
var person=personFactory("Amy",22,"Woman");
person.show();
</script>
从功能角度看，上述代码解决了函数重复创建的问题，但其外观仍不像标准的类定义，Java开发者可能依然觉得别扭。我们继续看下一步：
3、构造函数模式（Constructor Pattern）：
<script type="text/javascript">
function person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.show=function(){
document.write(this.name+" "+this.age+" "+this.sex);
document.write("<br>");
}
}
var per=new person("Amy",22,"Woman");
per.show();
</script>
上述代码的创建方式已与Java中类和对象的创建过程高度相似：先封装类的属性和方法，再利用new关键字实例化并返回对象。这正是Java创建对象的标准流程。不过，此模式仍有优化空间：每个实例调用show方法时，仍会即时创建一个独立的函数副本。我们能否像Java中的static静态方法那样，创建一个所有实例共享的方法？答案是肯定的。请看下文：
4、动态原型模式（Dynamic Prototype Pattern）：
<script type="text/javascript">
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
if(typeof Person.tag == "undefined"){
Person.prototype.show=function(){
document.write(this.name+" "+this.age+" "+this.sex);
document.write("<br>");
}
Person.tag=true;
}
}
var per=new Person("Peter",22,"Man");
per.show();
</script>
这里采用了一种技巧。当使用new关键字创建对象时，会执行Person构造函数中的if判断语句，代码从上至下顺序执行。由于初始状态下tag变量未定义，因此会执行if语句块内的内容：
Person.prototype.show=function(){
document.write(this.name+" "+this.age+" "+this.sex);
document.write("<br>");
}
这段代码的含义是创建一个属于Person类的show方法。请注意，这是一个类级别的方法，类似于Java中用static修饰的方法，而非单个对象的实例方法。这样，所有对象都可以调用同一个方法，无需为每个不同对象创建独立的show函数，既节省了内存空间，又提升了执行效率。这里需要解释的是，通过“类名.prototype.属性/方法”方式定义的属性和方法，在JavaScript中相当于Java中用static修饰的变量或方法，它们属于整个类，被所有实例共享。
以上是对JavaScript类和对象创建方式的总结，其中个人理解若有错误，恳请大家批评指正。
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别：JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53