当前位置：首页 > 全部内容 > JavaScript 创建对象的七种模式详解

JavaScript 创建对象的七种模式详解

作者：青柠时间：2026-10-23 17:50:57浏览：268

本文系统总结了JavaScript中创建对象的七种常见模式，包括工厂模式、构造函数模式、原型模式、组合使用构造函数和原型模式、动态原型模式、寄生构造函数模式以及稳妥构造函数模式。详细解析了每种模式的实现原理、优缺点及适用场景，帮助开发者根据实际需求选择最优的对象创建方案。

本文汇总了 JavaScript 中创建对象的多种模式，旨在为开发者提供实用的参考与对比分析。

1. 工厂模式

该模式通过封装特定接口的函数来抽象创建具体对象的过程，从而简化对象创建的细节。

  • 首先新建一个对象实例
  • 随后为该对象定义所需的属性和方法
  • 最后通过 return 语句返回刚新建的对象

function createPerson(name, age, job) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.job = job;
 obj.sayHi = function() {
 congsole.log(this.name);
 };
 return obj;
}

var person1 = createPerson("name1", "age1", "job1");
var person2 = createPerson("name2", "age2", "job2");

这种模式存在以下局限性：

无法解决对象识别问题，即无法准确判断对象的类型

2. 构造函数模式

  • 此模式不再显式地创建对象
  • 而是直接将属性和方法定义在 this 对象上
  • 构造函数内部没有 return 语句
  • 而是通过 new 操作符来调用构造函数

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayHi = function() {
 console.log(this.name);
 };
}

var person1 = new Person("name1", "age1", "job1");
var person2 = new Person("name2", "age2", "job2");

该模式的主要问题是：

  • 每个方法都必须在每个实例上重新创建一次，导致内存浪费

3. 原型模式

JavaScript 中创建的每一个函数都拥有 prototype 原型属性，该属性是一个指向对象的指针。这个对象用于包含可以由特定类型的所有实例共享的属性和方法。

所有原生引用类型都在其构造函数的原型上定义了相应的方法


function Person{

}

Person.prototype.name="name"
Person.prototype.age="age"
Person.prototype.job="job"
Person.prototype.sayHi=function(){
 console.log(this.name)
}

var person1=new Person()
var person2=new Person()

原型模式存在的问题：

  • 所有属性被多个实例共享，若包含引用类型值，可能会引发意外修改

4. 组合使用构造函数和原型模式

这种模式结合了前两者的优点：利用构造函数定义实例属性，而利用原型模式定义方法和共享的属性


function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
}
Person.prototype={
 constructor:Person;
 sayHi:function(){
 console.log(this.name)
 }
}

var person1 = new Person("name1", "age1", "job1");

5. 动态原型模式

在此模式下，对原型的修改能够立即对所有现有实例生效，且该逻辑仅在初次调用构造函数时执行


function Person(name,age,job){
 this.name=name;
 this.age=age;
 this.job=job;
 if(typeof this.sayHi !="function" ){
 Person.prototype.sayHi=functong(){
  console.log(this.name)
 }
 }
}

var person1 = new Person("name1", "age1", "job1");

6. 寄生构造函数模式

该模式结合了工厂模式和构造函数的特点

  • 返回的对象与构造函数本身以及构造函数的原型属性之间没有直接关系
  • 因此不能依赖 instanceof 运算符来判定对象的原型
  • 官方文档不建议使用此模式

function Person(name, age, job) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.job = job;
 obj.sayHi = function() {
 congsole.log(this.name);
 };
 return obj;
}

var person1 = new Person("name1", "age1", "job1");

7. 稳妥构造函数模式

  • 新创建的对象没有公共属性
  • 构造函数内部不使用 this 关键字
  • 构造函数内部也不使用 new 操作符

function Person(name, age, job) {
 var obj = new Object();
 // 定义室友变量和函数
 obj.sayHi = function() {
 congsole.log(name);
 };
 return obj;
}

var person1 = Person("name1", "age1", "job1");
// name1

以上内容摘抄自《JavaScript 高级程序设计》第六章

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家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