javascript - 对象的对象作为函数参数

Question

正如您从我的代码示例中看到的，我想知道为什么以下内容不起作用。 我有一个对象，其中一个对象作为属性(在下面的文本中将其称为 prop)。 当我将值分配给函数中的 prop 时，这些值就在那里，因为显然它是通过引用传递的，但我不明白为什么可以引用 prop 来指向另一个对象。

在将 prop 设置为另一个对象的情况下，我只得到空对象，就像在开始时一样。 我在这里缺少什么？

const person = {
  basic: {}
}


function initPersonBasics(b) {
  // doesn't work
  b = {
    firstName: 'John',
    lastName: 'Doe'
  }

  // works
  // b.firstName = 'John';
  // b.lastName = 'Doe';
}




initPersonBasics(person.basic);
console.log(person);

Answer 1

在 initPersonBasics() 函数内，参数 b 的行为类似于局部变量。当函数启动时，它已经用函数的第一个参数的值 (person.basic) 进行了初始化。

但是声明

b = {
    firstName: 'John',
    lastName: 'Doe'
}

在b中放入不同的值；它不会以任何方式改变person.basic。

正如您已经指出的，如果您没有为 b 分配新对象，而是设置 b.firstName 和 b.lastName ，值存储在 person.basic 中。发生这种情况是因为 JavaScript 赋值不会复制对象，而是存储对它们的引用。

有多种方法可以让它按照您的意愿工作。您已经发现了其中之一:将值一一存储在 b 的属性中(这是函数调用执行期间 person.basic 的别名) .

另一个选择是使用 Object.assign() :

function initPersonBasics(b) {
    Object.assign(b, {
        firstName: 'John',
        lastName: 'Doe'
    });
}

请注意，它不适用于较旧的浏览器(甚至某些较新的浏览器)。仔细查看Browser compatibility部分。

另一个选项(适用于所有浏览器)是 Object.defineProperties()但它的语法更加冗长:

function initPersonBasics(b) {
    Object.defineProperties(b, {
        firstName: {
            value: 'John',
            writable: true,
        },
        lastName: {
            value: 'Doe',
            writable: true,
        }
    });
}

请注意，如果您没有为某个属性提及 writable: true，该属性将变为只读且无法分配(并且不会报告错误)。