JavaScript创建对象方法：工厂、构造函数与原型模式实例解析

本文通过具体实例，系统梳理了JavaScript中创建对象的多种实现方式，旨在为读者提供清晰的参考与借鉴。

基础对象创建与工厂模式

最基础的做法是直接实例化一个Object对象，随后手动为其添加所需的属性与方法。


//示例代码
var person=new Object()
person.name="yumi"
person.age=18
person.job="coder"
person.sayName=function(){
  alert(this.name)
}
person.sayName()//输出yumi

尽管这种方式直观，但在需要创建大量具有相同接口的对象时，会导致代码高度重复，维护成本较高。

1. 工厂模式

由于JavaScript语言特性不支持传统的类定义，我们可以利用函数来封装创建特定接口对象的细节逻辑。


//示例代码
function createPerson(name,age,job){
  var o=new Object();
  o.name=name;
  o.age=age;
  o.job=job;
  o.sayName=function(){
    alert(this.name)
  };
  return o;
}
var person1=createPerson("yumi",18,"coder");
var person2=createPerson("echo",21,"player");
person1.sayName();//输出yumi
person2.sayName();//输出echo

工厂模式有效解决了批量创建相似对象的问题，但其局限性在于无法解决对象的类型识别问题，即难以判断一个对象具体属于哪种类型。

构造函数模式及其改进

2. 构造函数模式

开发者可以自定义构造函数，以此定义特定对象类型的属性与方法。


//示例代码
function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayName=function(){
    alert(name);
  }
}
var person1=new Person("yumi",18,"coder");
var person2=new Person("echo",21,"player");
person1.sayName();//输出yumi
person2.sayName();//输出echo

通过该模式创建的对象，既是Object的实例，也是自定义构造函数（如Person）的实例。这意味着我们可以将其实例标识为特定类型，这是相比工厂模式的一大优势。然而，构造函数模式存在一个明显缺陷：每次实例化对象时，都会重新创建一遍方法，造成内存浪费。对此，我们可以尝试进行如下改进：


//示例代码
function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayName=sayName;
}
function sayName(){
  alert(name);
}
var person1=new Person("yumi",18,"coder");
var person2=new Person("echo",21,"player");
person1.sayName();
person2.sayName();

一种改进方案是将函数定义在构造函数外部，并在构造函数内部将属性指向该全局函数（通常函数名代表指向函数的指针，而函数名加括号代表执行结果）。但这种做法引入了新问题：全局作用域中定义的函数只能被特定对象调用，违背了全局函数的设计初衷。此外，若对象包含大量方法且均定义在全局作用域，则完全丧失了封装性的意义。

原型模式详解

3. 原型模式

前文提到构造函数模式的缺点在于属性或方法仅在构造函数作用域内对单个对象可见。回顾其他面向对象语言的处理方式，通常将公共属性和方法定义在父类中，并通过继承调用。然而，JavaScript中没有类和继承的概念，而是通过原型链机制来实现类似“继承”的功能。

接下来介绍原型模式的具体实现：


//示例代码
function Person(){
  Person.prototype.name"yumi";
  Person.prototype.age=18;
  Person.prototype.job=coder;
  Person.prototype.sayName=function(){
    alert(name);
  }
}
var person1=new Person();
var person2=new Person();
person1.sayName();  //"yumi"
person2.sayName();  //"yumi"
alert(person1.sayName==person2.sayName);  //true

每当创建一个新函数时，JavaScript引擎会自动为该函数创建一个prototype属性。默认情况下，所有prototype属性都包含一个constructor属性，该属性指向prototype属性所在的函数指针。换言之，Person可视为一个类（实为函数），Person.prototype指向原型（原型中定义的方法或属性可被对象调用，相当于一个共享区域），而Person.prototype.constructor又指向了Person。实例化的对象拥有一个内部属性，可指向Person.prototype，但该属性与构造函数constructor无直接关联。

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

如需进一步了解JavaScript相关内容，建议查阅本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文的阐述能对您的JavaScript程序设计工作有所帮助。

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

基础对象创建与工厂模式

构造函数模式及其改进

原型模式详解

实用工具推荐