关于JavaScript对象字面量无法创建独立对象的技术咨询

嘿，我完全懂你碰到的这个小困扰——用对象字面量直接赋值的时候，其实你只是把同一个对象的引用传给了不同变量，所以a和b本质上是同一个对象的“别名”，修改其中一个自然会影响另一个。这是因为对象在JavaScript里是引用类型，赋值的时候复制的不是对象本身，而是指向它的内存地址。

下面给你几种简单有效的方法，能让你轻松创建完全独立的对象实例：

方法1：工厂函数 #

写一个返回新对象的函数，每次调用都会生成一个全新的对象实例：

function createObj() {
  return {
    name: '',
    /**
     * Set the `name` property.
     * @param {string} param - The name to set
     */
    set setName(param) {
      this.name = param;
    }
  };
}

// 使用示例
const a = createObj();
a.setName = "John";
const b = createObj();

console.log(a.name); // 输出 "John"
console.log(b.name); // 输出 "" 完全独立

方法2：构造函数（ES5风格） #

用构造函数配合new关键字，每个new都会生成独立的实例：

function Obj() {
  this.name = '';
}

// 把setter定义在原型上（也可以直接写在构造函数内部）
Object.defineProperty(Obj.prototype, 'setName', {
  set: function(param) {
    this.name = param;
  }
});

// 使用示例
const a = new Obj();
a.setName = "John";
const b = new Obj();

console.log(a.name); // 输出 "John"
console.log(b.name); // 输出 ""

方法3：ES6类语法（推荐） #

用更清晰的类来定义对象结构，new出来的每个实例都是独立的：

class Obj {
  constructor() {
    this.name = '';
  }

  /**
   * Set the `name` property.
   * @param {string} param - The name to set
   */
  set setName(param) {
    this.name = param;
  }
}

// 使用示例
const a = new Obj();
a.setName = "John";
const b = new Obj();

console.log(a.name); // 输出 "John"
console.log(b.name); // 输出 ""

为什么原来的写法不行？ #

当你执行var a = Obj; var b = Obj;时，a和b都指向同一个对象实例——就像两个人拿着同一扇门的钥匙，不管谁开门进去修改东西，另一个人看到的都是修改后的结果。而上面的方法每次都会创建一个全新的对象，相当于给每个人配了一扇新门的钥匙，各自的修改互不影响。

内容的提问来源于stack exchange，提问作者Brigo