JavaScript对象创建的7种模式：工厂、构造函数、原型及组合模式解析

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创建对象的七种方式，希望对大家有所帮助。如有任何疑问，请留言，小编会及时回复。感谢大家对本站的支持！

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