JS创建对象几种不同方法详解

JavaScript 中创建对象的方法有多种，每种方法都有其优缺点。以下是对这几种方法的详细讲解。

1. 使用对象字面量创建对象

使用对象字面量是最常所见的创建对象的方式之一，也是最简单的方式。对象字面量是一组用花括号包围的键值对，每个键值对表示对象的一个属性和相应的值。

let person = {
  name: 'John Smith',
  age: 25,
  sayHello: function() {
    console.log('Hello!');
  }
};

上述代码中，我们创建了一个名为 person 的对象，它有两个属性 name 和 age，分别被赋值为 'John Smith' 和 25。它还有一个 sayHello 方法，该方法用于在控制台中打印一条简单的问候语。

优点：

• 简单易懂
• 不需要使用额外的构造函数或原型

缺点：

• 无法实现复用性

2. 使用构造函数创建对象

JS 中的构造函数和其他编程语言中的类很相似，它们被用来创建对象。要创建一个构造函数，只需使用一个函数，并大写函数名称以示区别。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello!');
  }
}

let person = new Person('John Smith', 25);

在上述代码中，我们创建了一个名为 Person 的构造函数。调用 Person 时，我们传递了两个参数 name 和 age。函数体内使用 this 关键字引用了新对象，并给它设置了属性。最后，我们使用 new 关键字创建了一个新的 Person 对象，将其赋值给 person 变量。

优点：

• 可以创建多个相似的对象
• 可以使用 new 关键字来创建对象

缺点：

• 每个对象都有自己的方法，造成浪费

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

Object.create() 方法是用来创建一个新对象的，并将其原型设置为传递给它的对象。

const person = {
  name: 'John Smith',
  age: 25,
  sayHello: function() {
    console.log('Hello!');
  }
};

const newPerson = Object.create(person);

console.log(newPerson.name);
console.log(newPerson.age);
newPerson.sayHello();

在上述代码中，我们首先创建了一个名为 person 的对象，它有两个属性 name 和 age，以及一个 sayHello 方法。我们使用 Object.create() 方法和 person 对象作为参数创建了一个新的对象 newPerson，因此 newPerson 对象拥有 person 对象的所有属性和方法。

优点：

• 可以创建共享属性的对象
• 可以基于现有对象创建新对象

缺点：

• 在原型上定义的属性和方法会被所有子对象共享，可能会影响其他对象

4. 使用 ES6 的 class 关键字创建对象

ES6 引入了类的概念，并提供了使用 class 关键字定义类的语法。类是一个模板，可以用来创建对象。

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

  sayHello() {
    console.log('Hello!');
  }
}

let person = new Person('John Smith', 25);

console.log(person.name);
console.log(person.age);
person.sayHello();

在上述代码中，我们定义了 Person 类，该类具有 name 和 age 两个属性，以及一个 sayHello 方法。我们使用 new 关键字创建了一个新的 Person 对象。

优点：

• 更加清晰易懂
• 使用 class 可以更好的使用继承等概念

缺点：

• 只能在 ES6 或更高版本的环境中使用
• 语法上相对比较繁琐

示例说明：

为了进一步说明这几种方法的使用，在以下示例中我们将用它们来创建一个简单的 Rectangle 类型的对象。

// 使用对象字面量
let rectangle1 = {
  width: 100,
  height: 50,
  area: function() {
    return this.width * this.height;
  }
};

console.log(rectangle1.width);
console.log(rectangle1.height);
console.log(rectangle1.area());

// 使用构造函数
function Rectangle(width, height) {
  this.width = width;
  this.height = height;
  this.area = function() {
    return this.width * this.height;
  }
}

let rectangle2 = new Rectangle(100, 50);

console.log(rectangle2.width);
console.log(rectangle2.height);
console.log(rectangle2.area());

// 使用 Object.create() 方法
const rectanglePrototype = {
  area: function() {
    return this.width * this.height;
  }
};

const rectangle3 = Object.create(rectanglePrototype, {
  width: {value: 100},
  height: {value: 50}
});

console.log(rectangle3.width);
console.log(rectangle3.height);
console.log(rectangle3.area());

// 使用 class 关键字
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

let rectangle4 = new Rectangle(100, 50);

console.log(rectangle4.width);
console.log(rectangle4.height);
console.log(rectangle4.area());

在这个示例中，我们先使用了四种不同的方法创建了一个称为 Rectangle 的对象。我们成功地创建了四个具有相同属性和方法的对象，并通过输出它们的属性和方法验证了它们的正确性。