JavaScript对象创建的六种方式详解

作者:青柠

时间:2026-10-21

浏览:130

本文系统梳理JavaScript中创建对象的六种常见方式,包括Object构造函数、对象字面量、工厂模式、构造函数模式、原型模式以及组合使用构造函数和原型模式。详细解析每种方法的代码实现、优缺点及适用场景,帮助开发者根据实际需求选择最优方案。

文章目录

近期深入研读《JavaScript高级程序设计》,借此机会整理并总结JavaScript中几种主要的对象创建方式。以下直接进入核心内容。

Object构造函数与对象字面量

第一种方式:利用Object构造函数创建对象。


var Person = new Object();
Person.name = 'Nike';
Person.age = 29;

该代码示例展示了如何创建一个Object引用类型的新实例,并将该实例赋值给变量Person。

第二种方式:采用对象字面量表示法。


var Person = {};//相当于var Person = new Object();
var Person = {
 name:'Nike';
 age:29;  
}

对象字面量是定义对象的一种简洁形式,旨在简化包含大量属性对象的创建过程。实际上,第一种与第二种方式在本质上是相同的,仅存在语法写法的差异。

在介绍第三种方法前,需明确为何需要其他创建方式,即前两种方法的局限性:它们使用同一接口创建多个对象时,会产生大量重复代码。例如,若需创建100个对象,则需重复输入大量相同代码。为解决此问题,可将对象创建过程封装在函数体内,通过调用函数直接生成对象。

工厂模式创建对象

第三种方式:利用工厂模式创建对象。


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('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');

在使用工厂模式时,createPerson函数返回的是一个对象。由于无法直接判断返回对象的具体类型,因此出现了第四种创建模式。

构造函数模式

第四种方式:利用构造函数创建对象。


function Person(name,age,job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
 alert(this.name);
 }; 
}
var person1 = new Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');

与工厂模式相比,构造函数模式具有以下区别:

1. 未显式创建对象。

2. 直接将属性和方法赋值给this对象。

3. 省略了return语句。

4. 能够识别对象的类型。对于对象类型的检测,应使用instanceof操作符进行自主验证。


alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture

此外,需遵循命名惯例:构造函数始终以大写字母开头,而非构造函数则以小写字母开头。

虽然构造函数模式实用,但也存在缺陷:

每个方法都会在实例上重新创建一遍,这里的方法指在对象内部定义的函数。若方法数量众多,将占用不必要的内存空间。因此,出现了第五种创建对象的方法。

原型模式与组合模式

第五种方式:利用原型创建对象模式。


function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
person1.sayName();

采用原型创建对象的方式,可使所有对象实例共享其所包含的属性和方法。

若使用原型创建对象模式,请参考以下代码示例。


function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name); //'Greg' --来自实例
alert(person2.name); //'Nike' --来自原型

当为对象实例添加一个属性时,该属性会屏蔽原型对象中保存的同名属性。

此时,可采用构造函数模式与原型模式结合的方式:构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性。

第六种方式:组合使用构造函数模式和原型模式。


function Person(name,age,job){
 this.name =name;
 this.age = age;
 this.job = job;
}
Person.prototype = {
 constructor:Person,
 sayName: function(){
 alert(this.name);
 };
}
var person1 = new Person('Nike',20,'teacher');

以上内容为本文的全部总结,希望这些内容能对各位的学习或工作有所帮助,同时也感谢大家的支持。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章