现象

现象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. 【Anaconda】:科学计算的Python发行版

    [背景] Python易用,但包管理和Python不同版本的问题比较头疼,特别是当你使用Windows的时候.为了解决这些问题,有不少发行版的Python,比如WinPython.Anaconda等, ...

  2. ubuntu16搭建harbor镜像库

    参考 https://blog.csdn.net/qq_35720307/article/details/86691752 目的:搭建本地镜像库,方便快速的存放和拉取需要的镜像文件.

  3. Python中Flask框架SQLALCHEMY_ECHO设置

    在用配置类的方式给app设置配置时, SQLALCHEMY_ECHO 这个是记录打印SQL语句用于调试的, 一般设置为False, 不然会在控制台输出一大堆的东西 /home/python/.virt ...

  4. 【liferay】6、可配置式cookie

    问题提出 项目运行中,cookie的作用一般是起着一个不可或缺的权限控制或者认证的作用,但是如果是多系统交互,cookie是由别的系统生成,本系统对接的话,那么这个cookie就会 成为项目测试的一个 ...

  5. 跨站脚本攻击(xss)理解

    一  概念 攻击者不直接攻击受害者,而是利用受害者登陆的网站中的漏洞,对受害者进行攻击. 二  危害 由于js本身的限制,并不能直接对用户的电脑造成侵害,但是可以: 1. 获取用户的storage,c ...

  6. 课程一(Neural Networks and Deep Learning),第二周(Basics of Neural Network programming)—— 3、Python Basics with numpy (optional)

    Python Basics with numpy (optional)Welcome to your first (Optional) programming exercise of the deep ...

  7. vue 运行npm run dev报错

    npm run dev运行时报错,原因有很多. 一般用下面这种方法都能解决的. 最简单粗暴的方法: 1.删除依赖包node_modules 2.然后重新npm install就行了 (如果这步报错了, ...

  8. 企业域的冗余设计①:DHCP冗余设计(上)

    在许多企业网络中,为了方便客户端IP地址的管理,通常采用的是自动获取的方式向DHCP服务器获得IP地址.为了保证DHCP服务器能够正常稳定地向客户端提供IP地址的租赁,DHCP服务器的冗余设计就显得格 ...

  9. 如何自定义Tomcat Realm实现我们的用户认证需求

    导读 Tomcat对于J2EE或Java web开发者而言绝不陌生,但说到Realm,可能有些人不太清楚甚至没有听说过,那么到底什么是Realm?简单一句话就是:Realm是Tomcat中为web应用 ...

  10. curl 详解【转】

    原文:https://blog.csdn.net/lansesl2008/article/details/14523303 用途说明 curl命令是一个功能强大的网络工具,它能够通过http.ftp等 ...