引用对象的 console.log 没有打印出我所期望的 [重复]

Posted

技术标签:

【中文标题】引用对象的 console.log 没有打印出我所期望的 [重复]【英文标题】:console.log of referenced object doesnt print what i expcected [duplicate] 【发布时间】:2020-05-11 00:55:24 【问题描述】:

我有两个对象、一个函数和一些 console.logs:

let obj1 = 
  value: "a"


let obj2 = 
  value: "b"


console.log(obj1.value)
console.log(obj2.value)


function change(obj1, obj2) 
  obj1 = obj2;
  obj2.value = "c";
  console.log(obj1.value)
  console.log(obj2.value)


change(obj1, obj2);

console.log(obj1.value)
console.log(obj2.value)

结果:

a b c c a c

我预料到:

a b c c c c

有人能解释为什么值是 A 而不是 C 吗?

【问题讨论】:

【参考方案1】:
/* function scope obj1 and obj2, refer like function(f_obj1, f_obj2)
   f_obj1 is reference to global obj1
   f_obj2 is reference to global obj2 */
function change(obj1, obj2) 

  /* f_obj1 = reference of f_obj2 */
  obj1 = obj2;

  /* f_obj2 is referring global obj2 and value updated in global */
  obj2.value = "c";

  /* printing the f_obj1 and f_obj2 values */
  console.log(obj1.value)
  console.log(obj2.value)


// Now out of the function, So f_obj1 and f_obj2 are out of scope.

【讨论】:

【参考方案2】:

当您将函数的参数命名为与全局变量相同的名称时,函数将在内存上为该变量创建另一个空间。在这种情况下,该函数只会更改自身内部的值...

试试:

let obj1 = 
  value: "a"


let obj2 = 
  value: "b"


console.log(obj1.value)
console.log(obj2.value)


function change() 
  obj1 = obj2;
  obj2.value = "c";
  console.log(obj1.value)
  console.log(obj2.value)


change();

console.log(obj1.value)
console.log(obj2.value)

【讨论】:

【参考方案3】:

赋值= 运算符只生成对对象的引用,但不会复制它。在这种情况下 obj1 已经存在并且没有进行引用。 javascript 与对象和赋值运算符(相对于其他变量)有点混淆。

对象分配

通过使用赋值= 运算符,您告诉编译器引用对象而不是副本/浅副本。如果这是一个新变量,它将允许 2 种不同的方式获取相同的数据(如 C 中的指针)。但是 obj1 已经存在(它是函数的参数),因此它不会进行该引用。

现在您将 obj2 更改为 c,obj1 停留在 a(因为没有进行引用)。因此结果是a b c c a c 而不是a b c c c c

如果你想改变obj1,你必须直接在change()函数中修改它,你不能使用=来引用它。或者使用 .assign() 创建 obj1 的克隆/副本。

关于对象的好文章(或者我很喜欢): https://scotch.io/bar-talk/copying-objects-in-javascript

但是,在像这样提升变量时要小心,从技术上讲,您是在更改函数之外更改变量。您可能希望将它们传回并在同一级别分配它们,而不是在更改函数内部。

【讨论】:

以上是关于引用对象的 console.log 没有打印出我所期望的 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

有没有办法在控制台日志中打印出js文件的行号

console.log 如何打印对象

关于console.log() 打印得引用类型得数据得相关问题

vue中用console.log打印对象的各个属性值

打印对象时,console.log 如何确定要打印的属性?

console 打印消息时,可以使用 %c 指定随后的文本样式; %s 可引用参数变量。