JavaScript创建对象的七种经典方式详解

作者:木棉时间:2026-10-23 00:51:56浏览:228

本文详细解析JavaScript中创建对象的七种经典方式,包括工厂模式、构造函数模式、原型模式及其优缺点。重点介绍组合使用构造函数与原型模式、动态原型模式、寄生构造函数模式及稳妥构造函数模式,帮助开发者根据实际需求选择最合适的对象创建策略,解决代码复用、类型识别及内存共享等问题。

JavaScript对象创建概述

在JavaScript中,创建对象的方法多种多样。虽然可以通过Object构造函数或对象字面量来创建单个对象,但这种方式会产生大量重复代码,不适合批量生成对象。本文将介绍七种经典的对象创建方式,并分析它们各自的优缺点。

工厂模式

工厂模式


function createPerson(name, job) { 
 var o = new Object() 
 o.name = name 
 o.job = job 
 o.sayName = function() { 
  console.log(this.name) 
 } 
 return o 
} 
var person1 = createPerson('Jiang', 'student') 
var person2 = createPerson('X', 'Doctor') 

该模式允许无限次调用工厂函数,每次调用都会返回一个包含指定属性和方法的对象实例。

尽管工厂模式解决了创建多个相似对象的问题,但它无法解决对象识别问题,即无法通过该模式判断一个对象的具体类型。

构造函数模式

构造函数模式


function Person(name, job) { 
 this.name = name 
 this.job = job 
 this.sayName = function() { 
  console.log(this.name) 
 } 
} 
var person1 = new Person('Jiang', 'student') 
var person2 = new Person('X', 'Doctor') 

该模式没有显式创建对象,而是通过new关键字调用构造函数。使用new后,JavaScript引擎会自动执行以下操作:

创建一个新对象。

将该新对象与构造函数的原型([[prototype]])进行链接。

将新对象绑定到函数调用时的this上下文。

返回这个新对象。

使用这种方式创建的对象,可以通过instanceof操作符检测其类型。


person1 instanceof Object // true 
person1 instanceof Person //true 

然而,使用构造函数创建对象时,每个方法都会在每一个实例上重新创建一次,导致内存浪费。

原型模式及其局限

原型模式


function Person() { 
} 
Person.prototype.name = 'Jiang' 
Person.prototype.job = 'student' 
Person.prototype.sayName = function() { 
 console.log(this.name) 
} 
var person1 = new Person() 

将属性直接添加到原型对象上。使用原型的好处是,所有实例对象可以共享其包含的属性和方法,无需在构造函数中定义实例信息。

原型是一个非常重要的概念,关于proto和prototype的关系及区别,可在相关文章中详细了解。

更简单的写法


function Person() { 
} 
Person.prototype = { 
 name: 'jiang', 
 job: 'student', 
 sayName: function() { 
  console.log(this.name) 
 } 
} 
var person1 = new Person()

将Person.prototype设置为一个以对象字面量形式创建的对象,但这会导致.constructor属性不再指向Person。

使用这种方式完全重写了默认的Person.prototype对象,因此.constructor属性也不存在于此。


Person.prototype.constructor === Person // false 

如果需要保留该属性,可以手动添加。


function Person() { 
} 
Person.prototype = { 
 constructor:Person 
 name: 'jiang', 
 job: 'student', 
 sayName: function() { 
  console.log(this.name) 
 } 
} 

不过这种方式仍有不足,因为constructor属性默认是不可枚举的,直接设置会使其变为可枚举。因此,建议使用Object.defineProperty方法。


Object.defineProperty(Person.prototype, 'constructor', { 
 enumerable: false, 
 value: Person 
}) 

缺点

使用原型时,所有属性都将被共享,这虽然是一个优点,但也带来了一些缺点。

原型中的属性被许多实例共享,这对函数非常合适。对于包含基本值的属性,实例属性可以屏蔽原型属性,勉强可行。但对于引用类型值,就会出现共享问题。


function Person() { 
} 
Person.prototype = { 
 name: 'jiang', 
 friends: ['Shelby', 'Court'] 
} 
var person1 = new Person() 
var person2 = new Person() 
person1.friends.push('Van') 
console.log(person1.friends) //["Shelby", "Court", "Van"] 
console.log(person2.friends) //["Shelby", "Court", "Van"] 
console.log(person1.friends === person2.friends) // true 

friends存在于原型中,实例person1和person2指向同一个原型。如果person1修改了引用的数组,这一变化也会反映到实例person2中。

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

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

这是使用最广泛、认同度最高的一种创建自定义类型的方法,它可以解决上述模式的缺点。

使用此模式可以让每个实例拥有自己的一份实例属性副本,同时又共享对方法的引用。

这样,即使实例属性修改引用类型的值,也不会影响其他实例的属性值。


function Person(name) { 
 this.name = name 
 this.friends = ['Shelby', 'Court'] 
} 
Person.prototype.sayName = function() { 
 console.log(this.name) 
} 
var person1 = new Person() 
var person2 = new Person() 
person1.friends.push('Van') 
console.log(person1.friends) //["Shelby", "Court", "Van"] 
console.log(person2.friends) // ["Shelby", "Court"] 
console.log(person1.friends === person2.friends) //false 

动态原型模式

动态原型模式

动态原型模式将所有信息封装在构造函数中。初始化时,通过检测某个应该存在的方法是否有效,来决定是否需要初始化原型。


function Person(name, job) { 
  // 属性 
 this.name = name 
 this.job = job 
 // 方法 
 if(typeof this.sayName !== 'function') { 
  Person.prototype.sayName = function() { 
    console.log(this.name) 
  } 
 } 
} 
var person1 = new Person('Jiang', 'Student') 
person1.sayName() 

只有在sayName方法不存在时,才会将其添加到原型中。这段代码仅在初次调用构造函数时执行。

此后原型已完成初始化,无需再做修改。

对原型所做的修改,能够立即在所有实例中得到反映。

此外,if语句检查的可以是初始化后应该存在的任何属性或方法,因此只需检查一个即可,无需使用大量if语句检查每个属性和方法。

寄生构造函数模式

寄生构造函数模式

这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后返回新建的对象。


function Person(name, job) { 
  var o = new Object() 
 o.name = name 
 o.job = job 
 o.sayName = function() { 
  console.log(this.name) 
 } 
 return o 
} 
var person1 = new Person('Jiang', 'student') 
person1.sayName() 

除了使用new操作符并将使用的包装函数称为构造函数外,该模式与工厂模式几乎相同。

如果构造函数不返回对象,默认会返回一个新对象。通过在构造函数末尾添加return语句,可以重写调用构造函数时返回的值。

稳妥构造函数模式

稳妥构造函数模式

首先明确,稳妥对象指的是没有公共属性,且其方法也不引用this。

稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new),或防止数据被其他应用程序改动时使用。

稳妥构造函数模式与寄生模式类似,有两点不同:一是创建对象的实例方法不引用this,而是不使用new操作符调用构造函数。


function Person(name, job) { 
 var o = new Object() 
 o.name = name 
 o.job = job 
 o.sayName = function() { 
  console.log(name) 
 } 
 return o 
} 
var person1 = Person('Jiang', 'student') 
person1.sayName() 

与寄生构造函数模式一样,这样创建出来的对象与构造函数之间没有什么关系,instanceof操作符对他们没有意义。

以上介绍了JavaScript创建对象的七种方式,希望对大家有所帮助。如有任何疑问,请留言,小编会及时回复。感谢大家对本站的支持!

作者最新文章