创建对象的十种方式，助你玩转JS面向对象！

2023-04-06 21:01:33

理解 JavaScript 中对象创建的 10 种方式

在 JavaScript 中，对象是一种基本数据结构，代表一组相关数据。创建对象是面向对象编程的基础，本指南将深入探讨 10 种常用方式，帮助你掌握 JavaScript 中的对象创建机制。

1. new Object()：基本对象创建

最直接的方法是使用 new Object()，它创建一个空对象。这种方式简单易懂，但通常用于更复杂的场景中。

const obj = new Object();
console.log(obj); // {}

2. 构造函数与原型对象：自定义对象

构造函数是一种特殊函数，用于创建和初始化对象。它隐式地定义一个原型对象，包含对象共有的属性和方法。

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('John', 20);
person1.sayHello(); // Hello, my name is John

3. 对象字面量：便捷对象创建

对象字面量是一种简洁的方式，使用大括号将键值对包裹起来创建对象。

const obj = {
  name: 'John',
  age: 20
};

console.log(obj); // { name: 'John', age: 20 }

4. 工厂函数：可复用的对象创建

工厂函数是一种返回新对象的函数，常用于可复用的对象创建。

function createPerson(name, age) {
  return {
    name,
    age
  };
}

const person1 = createPerson('John', 20);
console.log(person1); // { name: 'John', age: 20 }

5. 类：面向对象编程的语法糖

ES6 引入了类，它提供了一种更清晰、更符合面向对象编程的语法来创建对象。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person1 = new Person('John', 20);
person1.sayHello(); // Hello, my name is John

6. Object.create()：指定原型对象

Object.create() 允许你创建一个新对象，并指定其原型对象。

const personProto = {
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const person1 = Object.create(personProto, {
  name: {
    value: 'John'
  }
});

person1.sayHello(); // Hello, my name is John

7. Object.assign()：对象合并

Object.assign() 将源对象中的可枚举属性合并到目标对象中，通常用于克隆或扩展对象。

const source = { name: 'John' };
const target = {};

Object.assign(target, source);

console.log(target); // { name: 'John' }

8. Spread 运算符：对象扩展

ES6 引入了 spread 运算符 (...)，它可以将对象属性展开到另一个对象中。

const source = { name: 'John' };
const target = { ...source, age: 20 };

console.log(target); // { name: 'John', age: 20 }

9. JSON.parse()：JSON 字符串转换

JSON.parse() 将 JSON 字符串转换为 JavaScript 对象。

const jsonString = '{"name": "John", "age": 20}';
const person = JSON.parse(jsonString);

console.log(person); // { name: 'John', age: 20 }

10. Reflect.construct()：动态对象创建

Reflect.construct() 允许你使用构造函数动态创建对象。

const constructor = function(name, age) {
  this.name = name;
  this.age = age;
};

const person1 = Reflect.construct(constructor, ['John', 20]);

console.log(person1); // { name: 'John', age: 20 }