JavaScript 对象创建姿势大观

2023-10-01 10:52:55

构造函数

构造函数是创建对象最常见的方式。构造函数是一个特殊的函数，它用来创建和初始化对象。构造函数的名称必须与要创建的对象的名称相同，并且必须使用 new 来调用。

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

const person = new Person('John Doe', 30);

console.log(person.name); // 'John Doe'
console.log(person.age); // 30

2. 原型

原型是另一种创建对象的方式。原型是一个对象，它包含了一组属性和方法，这些属性和方法可以被其他对象继承。原型可以通过 Object.create() 方法来创建。

const personPrototype = {
  getName: function() {
    return this.name;
  },
  getAge: function() {
    return this.age;
  }
};

const person = Object.create(personPrototype);
person.name = 'John Doe';
person.age = 30;

console.log(person.getName()); // 'John Doe'
console.log(person.getAge()); // 30

3. Object.create()

Object.create() 方法是创建对象的一种语法糖。它与原型创建对象的方式类似，但更简洁。

const person = Object.create(personPrototype, {
  name: {
    value: 'John Doe'
  },
  age: {
    value: 30
  }
});

console.log(person.getName()); // 'John Doe'
console.log(person.getAge()); // 30

4. class

class 是 ES6 中引入的一种新的创建对象的方式。class 是一种语法糖，它将构造函数和原型结合在一起，使代码更简洁、更易于理解。

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

  getName() {
    return this.name;
  }

  getAge() {
    return this.age;
  }
}

const person = new Person('John Doe', 30);

console.log(person.getName()); // 'John Doe'
console.log(person.getAge()); // 30

5. new

new 是一个运算符，它可以用来创建对象。new 运算符会创建一个新的对象，并调用该对象的构造函数。

const person = new Object();

person.name = 'John Doe';
person.age = 30;

console.log(person.name); // 'John Doe'
console.log(person.age); // 30

6. 比较

以下表格总结了 JavaScript 中创建对象的各种姿势的优缺点：

方法	优点	缺点
构造函数	最常见的方式	需要使用 new 关键字
原型	允许对象继承属性和方法	需要手动创建原型对象
Object.create()	比原型更简洁的语法糖	需要手动创建原型对象
class	ES6 中引入的语法糖，将构造函数和原型结合在一起	仅限于 ES6 及更高版本
new	可以用来创建任何类型的对象	需要手动创建对象