Javascript 赋值运算符奇怪的行为

Question

我在开发一个事件小部件时发现了奇怪的行为，这可能是菜鸟问题。

下面是我正在处理的代码块

var event={0:{competition:{like:false}}}
console.log(event[0].competition.like);   //returns false
var cmpt=event[0].competition;
cmpt.like=true;
console.log(event[0].competition.like) //returns true

你能帮我理解一下，为什么事件对象中竞争的 属性 [like] 的值正在更新。以及如何防止这种情况发生且未更新事件对象？

我尝试调查 google/so 但这些问题解决的是不同的问题。

Answer 1

您正在分配对

的引用

    event[0].competition

到变量 cmpt 然后修改它的值 - 无论你对原始实例做什么都会影响 cmpt 变量

Answer 2

在 JavaScript 中，对象总是通过引用传递。这意味着当你将一个对象赋值给另一个变量时，它仍然指向同一个对象。如果你想拥有两个独立的对象，你必须克隆它。例如，您可以使用 _.clone() method from lodash library:

var cmpt = _.clone(event[0].competition);

Answer 3

Can you help me understanding, why value of attribute [like] of competition inside event object is getting updated

您通过执行此作业在 cmpt 中复制了 event[0].competition 的引用。

现在 cmpt 指向 event[0].competition 指向的同一个对象。因此，如果您更新该值，它基本上会在两个变量指向的同一对象中进行更改。

how can I prevent this and not updated event object?

如果您想确保不更新旧值，那么您需要在分配时深度克隆对象

替换

var cmpt=event[0].competition;

和

var cmpt=JSON.parse( JSON.stringify( event[0].competition ) );

Answer 4

当你有一个对象时，你 'copy' 它就像你做的那样变成一个新对象，并更改新对象旧对象被更新。

这是因为您实际上并没有复制它，您只是对原始对象有另一个引用，所以您在 'copy' 上所做的任何更改都会反映在原始对象中...

Answer 5

这是因为在 JavaScript 中，当您将一个对象值赋给另一个变量时，您实际上是在为其赋值（它不会像原始值那样被复制）。

所以ˋcmptˋ和ˋevent[0].competitionˋ指的是同一个对象。

如果你需要克隆一个对象，并且它只包含原始值、数组和简单对象（没有函数），你可以使用ˋJSON.stringifyˋ和ˋJSON.parseˋ。

var event={0:{competition:{like:false}}}
console.log(event[0].competition.like);       //returns false
var cmpt=JSON.parse(JSON.stringify(event[0].competition));
cmpt.like=true;
console.log(event[0].competition.like)
//returns false

Answer 6

那为什么你只是"renaming"事件，你可以这样做。

var event={0:{competition:{like:false}}}
console.log(event[0].competition.like);   //returns false
var cmpt = {};
cmpt.like = event[0].competition.like;
cmpt.like = true;
console.log(event[0].competition.like) //returns false

Answer 7

您可以使用以下内容：

var event={0:{competition:{like:false}}}
console.log(event[0].competition.like);   //returns false
var cmpt=jQuery.extend({}, event[0].competition);
cmpt.like=true;
console.log(event[0].competition.like) //returns false (changed)

Answer 8

and how can I prevent this and not updated event object?

您可以使用 Object.create() 并将第一个参数设置为 null；将第二个参数属性描述符的 value 处的 event[0].competition 属性迭代到 Object.create()，将每个属性的值设置为 null，return 新创建的对象 event[0].competition 的属性设置为 null.

var event = {
  0: {
    competition: {
      like: false
    }
  }
}

console.log(event[0].competition.like); //returns false

var cmpt = Object.create(null, {
  competition: {
    value: (function(obj) {
      var _obj = {};
      for (var prop in obj) {
        _obj[prop] = null
      };
      return _obj
    }(event[0].competition)),
    writable: true,
    enumerable: true,
    configurable: true
  }
});
cmpt.competition.like = true;
console.log(event[0].competition.like, cmpt.competition.like
           , event[0], cmpt) //`false, `true`

Javascript 赋值运算符奇怪的行为

Javascript assignment operator weird behaviour

javascript

variable-assignment

assignment-operator