JS对象创建方式梳理

JS对象创建方式梳理

1. 对象字面量（最常用）

let obj = {
  name: "Tom",
  age: 20,
  sayHi: function () {
    console.log("Hi, I'm " + this.name);
  }
};
obj.sayHi(); // Hi, I'm Tom

✅ 简洁直观，最常用

❌ 不能复用（每次都要手动写）

2. 使用 new Object() 构造函数

let obj = new Object();
obj.name = "Tom";
obj.age = 20;
obj.sayHi = function () {
  console.log("Hi, I'm " + this.name);
};

✅ 等价于对象字面量

❌ 代码冗余，实际开发里很少直接用

3. 工厂函数（返回对象）

function createPerson(name, age) {
  return {
    name,
    age,
    sayHi() {
      console.log("Hi, I'm " + this.name);
    }
  };
}
​
let p1 = createPerson("Tom", 20);
let p2 = createPerson("Jerry", 22);

✅ 可以批量创建对象

❌ 无法识别对象的具体类型（p1.constructor === Object）

---

4. 构造函数（模拟类）

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function () {
    console.log("Hi, I'm " + this.name);
  };
}
​
let p1 = new Person("Tom", 20);
let p2 = new Person("Jerry", 22);

✅ 可以用 new 创建实例对象

❌ 每个实例都会复制 sayHi 方法（浪费内存）

5. 构造函数 + 原型

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHi = function () {
  console.log("Hi, I'm " + this.name);
};
​
let p1 = new Person("Tom", 20);
let p2 = new Person("Jerry", 22);

✅ 方法挂在原型上，所有实例共享，节省内存

✅ 传统面向对象方式

---

6. ES6 class 语法（语法糖）

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHi() {
    console.log("Hi, I'm " + this.name);
  }
}
​
let p1 = new Person("Tom", 20);

✅ 语法更优雅，面向对象写法直观

✅ 实际上还是基于原型

---

7. Object.create()

let proto = {
  sayHi() {
    console.log("Hi, I'm " + this.name);
  }
};
​
let obj = Object.create(proto);
obj.name = "Tom";
obj.sayHi(); // Hi, I'm Tom

✅ 可以精确指定原型，适合实现原型继承

❌ 创建过程不直观

8. Object.assign()（复制创建）

let obj1 = { name: "Tom" };
let obj2 = Object.assign({}, obj1, { age: 20 });
console.log(obj2); // { name: "Tom", age: 20 }

✅ 快速复制或合并对象

❌ 只是浅拷贝