Javascript赋值运算符奇怪的行为

Posted

技术标签:

【中文标题】Javascript赋值运算符奇怪的行为【英文标题】:Javascript assignment operator weird behaviour 【发布时间】:2016-09-01 15:33:36 【问题描述】:

我正在研究一个事件小部件并发现奇怪的行为,这可能是菜鸟问题。

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

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,但这些问题解决了不同的问题。

【问题讨论】:

你只是在复制一个引用,而不是对象。 这是因为在 javascript 中对象是通过引用传递的,为了使其按照您希望的方式工作,您需要克隆竞争对象。 如果它不是字符串或数字,那么它是一个引用(指针)。要复制一个对象(而不是指向它),请执行 Object.create(event[0].competition) @jcubic:虽然Object.create() 的实现细节严格继承自给定对象,但语义完全等同于深度克隆。更改父对象不会更改子对象,更改子对象不会更改父对象。这就是为什么Object.create() 被认为是现代 js 环境中的标准深拷贝技术。 @slebetman 看看这个jsfiddle.net/yfyv74nm/1 【参考方案1】:

您正在分配对

的引用
    event[0].competition

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

【讨论】:

【参考方案2】:

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

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

【讨论】:

【参考方案3】:

你能帮我理解,为什么属性 [like] 的值 事件对象内部的竞争正在更新

您通过执行此作业将event[0].competition 的引用复制到cmpt

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

如何防止这种情况发生而不更新事件对象?

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

替换

var cmpt=event[0].competition;

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

【讨论】:

非常感谢。我使用 jQuery.clone 将对象复制到新变量中。【参考方案4】:

当你有一个对象时,你就像你做的那样将它“复制”到一个新对象中,并更改新对象旧对象被更新。

这是因为您实际上并没有复制它,您只是对该原始对象有另一个引用,因此您在“副本”上所做的任何更改都会反映在原始对象中...

【讨论】:

【参考方案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

【讨论】:

【参考方案6】:

这就是为什么你只是“重命名”事件,你可以这样做。

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

【讨论】:

【参考方案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) 

【讨论】:

【参考方案8】:

如何防止这种情况发生而不更新事件对象?

您可以使用Object.create(),第一个参数设置为null;在第二个参数的属性描述符的value 处迭代event[0].competition 属性为Object.create(),将每个属性的值设置为null,返回新创建的对象,其属性为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赋值运算符奇怪的行为的主要内容,如果未能解决你的问题,请参考以下文章

Python赋值运算符与非赋值不同

有人可以解释为啥条件运算符和赋值运算符一起使用时表现奇怪吗?

使用奇怪的重复模板模式 (CRTP) 在抽象基类中实现赋值运算符

JavaScript中赋值运算符的使用

类包含复制构造函数和赋值运算符时的继承行为

JavaScript 运算符