现象

现象1

利用简单的例子描述下

打印出的结果为

很明显可以看出,对象在打印之后改变,但最终结果还是改变后的值,因此console.log保存的事对象的引用。

现象2

但是,在debugger的过程中我发现,如果在对象改变之前去控制台展开对象看,结果就不太一样了


发现这时候即使后面执行了a.b.c = 2,控制台的输出也没有变化了

现象3

而如果第一次展开时不全部展开,像这样

那第二次去看的时候,就是会有个很奇怪的现象

此时再展开,就是这样

小结

从以上现象看,好像就是不展开看就是引用,展开看了就不是了;且展开了上一层,只要下一层还没展开,那下一层就还是引用(现象3)。

原因

以上的小结其实有误导,研究了一下我发现原因远在天边,近在眼前。展开对象后,打印结果右上角有个感叹号,把鼠标放在上面

这句英文意思是:以下结果是刚刚被执行的。这也就很好解释上面的现象了,也就是展开之前保存的是快照,展开对象时 ,才会去引用里执行取值操作。
还发现一个现象,如果在现象2中,看到结果1后收起对象,看结果2时再展开,结果不会有任何变化,也就是说只要展开过一次,第二次就不会再进行取值操作了。

可选解决方案

如果想要真正看到console.log所在行对象当时的值,可以用

  • JSON.stringify(a),将对象转换为字符串
  • JSON.parse(JSON.stringify(a))
    备注:在用console.log调试时,看到的不一定是真实的,要多多注意。

console.log-对象引用的更多相关文章

  1. 两次console.log打印值不同

    var a=[1,2,3] console.log(a); a[2]=10; console.log(a); // 打印结果 // (3) [1, 2, 3] // (3) [1, 2, 10] // ...

  2. const let,console.log('a',a)跟console.log('a'+a)的区别

    const 创建一个只读的常量 let块级作用域 const let重复赋值都会报错 console.log('a',a) a console.log('a'+a) a2 逗号的值会有空格:用加号的值 ...

  3. console.log("A"-"B"+"3")=?

    (点击上方的订阅号,可快速关注,关注有惊喜哦^_^) 前不久看到一道JS基础题目,做了一下竟然错了一半...在此分享一下: 先把题目放上来,大家可以自己测试一下再看答案哦^_^ ①console.lo ...

  4. javascript的console.log用法

    f1.html代码 <iframe id="frame2" name="frame1" src="ww.html"></i ...

  5. alert()与console.log()的区别

    [1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. al ...

  6. console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(5))调用解析

    console.log((function f(n){) ? n * f(n-) : n)})()); 5被传入到函数,函数内部三元计算,5 > 1成立,运算结果是5*f(4),二次运算,5*4 ...

  7. JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力。。

      JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力..   小森执行一 ...

  8. console.dir() 与 console.log() 区别

    Difference console.log prints the element in an HTML-like tree console.dir prints the element in a J ...

  9. 简述alert和console.log的区别

    生活中还是得有发现美好和差别的眼睛~~ 学习前端那么久既然还不知道alert和console.log的差别~~~~ 蓝瘦,香菇~~~ 本菜鸟一直以为alert和console.log其实是一样的用法, ...

  10. console.log()与alert()的区别

    1.alert() a.有阻塞作用,不点击确定,后续代码无法继续执行 b.alert只能输出string,如果alert输出的是对象,会自动调用toString()方法 eg:alert([1,2,3 ...

随机推荐

  1. SQL高效查询两个表不同的数据

    逻辑相对复杂,但是速度最快: )

  2. iOS-项目创建多个target

    在开发中,有时需要两个或多个APP版本,每个版本的改动,不是很多,但是需要另外打包,那么我们就有两套方案: 1.重新开发,把代码复制一遍,然后在修改: 2.用一套代码,根据需求生成不同的包: 我们一般 ...

  3. Hi,我们再来聊一聊Java的单例吧(转)

    1. 前言 单例(Singleton)应该是开发者们最熟悉的设计模式了,并且好像也是最容易实现的——基本上每个开发者都能够随手写出——但是,真的是这样吗? 作为一个Java开发者,也许你觉得自己对单例 ...

  4. JS 跨域认识及如何解决

    什么是跨域 指的是浏览器不允许javascrip脚本向其他域名发起ajax请求. 跨域的各种情况判定 URL 说明 是否允许通信 http://www.a.com/a.js http://www.a. ...

  5. 2. GitHub远程仓库

    1. GitHub ssh-keygen -t rsa -C "youremail@example.com"        之后再用户主目录里会有隐藏的.ssh目录,里面有id_r ...

  6. How To Crop Bitmap For UWP

    裁剪图片主要是借助于 BitmapDecoder.GetPixelDataAsync() 以及 BitmapTransform对象来实现. 实现的代码如下: using System; using S ...

  7. 使用 Redis 共享 Session 会话

    储存模式 1.InProc模式 这是ASP.NET默认的Session管理模式,在应用进程内维护Session. 2.StateServer模式 这是在服务器装了.NET环境后自带的一个StateSe ...

  8. Error:Could not determine the class-path for interface com.android.builder.model.AndroidProject.

    Android Studio导入Eclipse项目报错Error:Could not determine the class-path for interface com.android.builde ...

  9. JavaScript -- Document-Element

    -----046-Document-Element.html----- <!DOCTYPE html> <html> <head> <meta http-eq ...

  10. 从Java进程里dump出类的字节码文件

    想要查看一些被增强过的类的字节码,或者一些AOP框架的生成类,就需要dump出运行时的Java进程里的字节码. 从运行的java进程里dump出运行中的类的class文件的方法: 用agent att ...