JavaScript 对象定义方法

JavaScript 中创建对象的几种方式及其区别

问题

JavaScript 有哪些方法定义对象?

解答

1. 对象字面量

最常用、最简洁的方式。

const person = {
  name: '张三',
  age: 25,
  sayHi() {
    console.log(`我是 ${this.name}`);
  }
};

person.sayHi(); // 我是 张三

2. new Object()

使用内置构造函数创建对象。

const person = new Object();
person.name = '张三';
person.age = 25;
person.sayHi = function() {
  console.log(`我是 ${this.name}`);
};

person.sayHi(); // 我是 张三

3. 构造函数

适合创建多个相似对象。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log(`我是 ${this.name}`);
  };
}

const p1 = new Person('张三', 25);
const p2 = new Person('李四', 30);

p1.sayHi(); // 我是 张三
p2.sayHi(); // 我是 李四

4. Object.create()

基于原型创建对象,可以指定原型对象。

// 原型对象
const personProto = {
  sayHi() {
    console.log(`我是 ${this.name}`);
  }
};

// 创建对象,指定原型
const person = Object.create(personProto);
person.name = '张三';
person.age = 25;

person.sayHi(); // 我是 张三

// 创建无原型对象
const pureObj = Object.create(null);
console.log(pureObj.toString); // undefined,没有继承 Object.prototype

5. class 语法(ES6)

语法糖,本质还是构造函数。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log(`我是 ${this.name}`);
  }
}

const person = new Person('张三', 25);
person.sayHi(); // 我是 张三

6. 工厂函数

返回对象的普通函数,不使用 new。

function createPerson(name, age) {
  return {
    name,
    age,
    sayHi() {
      console.log(`我是 ${this.name}`);
    }
  };
}

const person = createPerson('张三', 25);
person.sayHi(); // 我是 张三

对比总结

方式适用场景特点
对象字面量单个对象简洁直观
new Object()单个对象不推荐,啰嗦
构造函数多个相似对象可复用,有原型链
Object.create()需要指定原型灵活控制原型
class多个相似对象语法清晰,支持继承
工厂函数多个相似对象无 new,无原型链

关键点

  • 对象字面量是最常用的方式,简单场景首选
  • 构造函数和 class 适合创建多个相似对象,方法定义在原型上可节省内存
  • Object.create() 可以创建指定原型的对象,传 null 可创建纯净对象
  • 工厂函数不需要 new,但每个对象的方法都是独立的,占用更多内存
  • class 是构造函数的语法糖,typeof 一个 class 返回 “function”