Javascript - 如何更改对象属性而不重新分配它们

Question

下面的片段揭示了疑问

var foo = 'something'
var baz = 'other thing'

var obj = {
  prop1 : 'my prop',
  prop2 : foo,        //referencing external variable
  prop3 : baz         //referencing external variable
}

// here we get the expected obj to be printed
console.log(obj)

// now I change one of the initial variable
foo = 'changed'

// here we get the sabe print as the first, that is the ~problem~   
console.log(obj)

那么,如何在没有重新分配的情况下在prop2上打印"已更改" obj.prop2 = foo

Answer 1

当你这样做

var obj = {
  prop1 : 'my prop',
  prop2 : foo,        //referencing external variable
  prop3 : baz         //referencing external variable
}

有没有之间正在进行的链路prop2和可变foo(或prop3和baz).所有这一切发生的是,当前值的foo读取,并存储在prop2(与同为baz和prop3).

如果您需要prop2并prop3保持链接到foo和baz,您可以使用getter创建它们的属性.这些属性在读取时触发函数调用(还有设置器在设置属性时触发函数调用):

var obj = {
  prop1 : 'my prop',
  get prop2() { return foo; },
  get prop3() { return baz; }
};

访问obj.prop2是一个隐藏的函数调用.由于函数关闭foo,它返回foo当前值.

实例:

var foo = 'something';
var baz = 'other thing';

var obj = {
  prop1 : 'my prop',
  get prop2() { return foo; },
  get prop3() { return baz; }
};

console.log(obj);

foo = 'changed';

console.log(obj);

Answer 2

由于JavaScript是通过值传递而不是通过引用传递,因此您无法通过将其直接分配给变量来覆盖以前的值.

你可以创建一个对象,并改变对象的属性,如下所示:

var foo = {value: 'something'}
var baz = 'other thing'

var obj = {
  prop1 : 'my prop',
  prop2 : foo,        //referencing external variable
  prop3 : baz         //referencing external variable
}

console.log(obj)

foo.value = 'changed'
 
console.log(obj)