JavaScript之创建对象的几种方法

JavaScript是一门面向对象的语言，那么首当其冲，创建对象就是一个绕不开的话题。

创建对象的方式多种多样，每种都有其应用场景，也许你用过，也许用过而不知。如果不是的深入学习，只是完成一些简单业务的话，根本就不需要考虑这些。但为了提升自己的能力，梳理一下知识体系，了解不同的对象创建方法是有必要的。

对象的不同创建方式

使用字面量创建对象

使用对象字面量创建对象是最简单对象创建方式。

javascript 复制代码

const person = {
  name: '苏白',
  age: 18,
  sayName() {
    return this.name
  }
}

console.log(person)

使用构造函数创建对象

使用new关键字调用构造函数，可以初始化一个新的对象。

构造函数可以是内置构造函数，也可以是自定义构造函数。

构造函数可以通过this为对象添加属性，属性类型可以是基本类型、对象或者函数。

javascript 复制代码

const Person = function (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}
// 作为构造函数调用
const subai = new Person('苏白', 18)
const cuiluoheng = new Person('崔洛恒', 18)

console.log(subai.sayName === cuiluoheng.sayName) // false

// 作为普通函数调用
Person('邱文', 18)
window.sayName() // 邱文

// 在对象作用域中调用Person
const other = new Object()
Person.call(other, '叶琛', 18)
other.sayName() // 叶琛

每个实例方法都会占据一定的内存空间，会造成资源的浪费；

构造函数作为普通函数调用，函数内部this会指向window对象

使用原型对象创建对象

使用原型对象创建对象是将所有的函数和属性都封装在对象的prototype属性中，对象的构建过程简单理解成对原型的复制。

这种创建方式很少单独使用，因为使用原型对象创建的实例，属性和方法都是相同的，不同实例之间共享原型上的属性和方法，改变一个实例的属性值会引起其他实例属性值的变化。

javascript 复制代码

function Person() {}

Person.prototype = {
  constructor: Person,
  name: '苏白',
  age: 18,
  sayName() {
    return this.name
  }
}
const person_1 = new Person()
const person_2 = new Person()
console.log(person_1.sayName === person_2.sayName) // true
console.log(person_1.name === person_2.name) // true

混合使用构造函数与原型对象创建对象

混合使用构造函数和原型对象方法创建对象是非常常用的一种方式。

在构造函数中定义实例共享的属性和方法，通过构造函数传递参数，让每个实例可以拥有自己的属性值，同时还可以共享方法的引用。

javascript 复制代码

function Person(name, age) {
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  return this.name
}

const subai = new Person('苏白', 18)
const cuiluoheng = new Person('崔洛恒', 18)

console.log(subai.sayName === cuiluoheng.sayName) // true
console.log(subai.name === cuiluoheng.name) // false

这种混合方式可以节省内存，实时地识别、添加或者更改成员

使用Object.create()方法创建对象

使用Object.create()方法创建对象，允许为创建的对象选择一个原型对象，而不用定义构造函数。

javascript 复制代码

const person = {
  name: '苏白',
  age: 18,
  sayName() {
    console.log(`姓名：${this.name}--年龄：${this.age}`)
  }
}
const person_1 = Object.create(person)
console.log(person_1) // {}

person.name = '崔洛恒'
person_1.sayName() //  姓名：崔洛恒--年龄：18

Object.create()创建的对象只是原型指向源对象，并不会继承它的任何属性

工厂模式创建对象

工厂模式是一种软件工程领域用来创建特定对象的过程，是一种设计模式，并非独属于JavaScript。

工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）

ES5实现工厂模式

javascript 复制代码

function createPerson(name, age) {
  const obj = {} // 相当于 obj = new Object()
  obj.name = name
  obj.age = age
  obj.sayName = function () {
    console.log(this.name)
  }
  return obj
}

const subai = createPerson('苏白', 18)
const cuiluoheng = createPerson('崔洛恒', 18)

ES6实现工厂模式

javascript 复制代码

class User {
  constructor(name, auth) {
    this.name = name
    this.auth = auth
  }
}

class UserFactory {
  static createUser(name, auth) {
    if (auth === 'admin') return new User(name, 1)
    if (auth === 'user') return new User(name, 2)
  }
}

const subai = UserFactory.createUser('苏白', 'admin')
const cuiluoheng = UserFactory.createUser('崔洛恒', 'user')