不靠谱的 console

栏目: JavaScript · 发布时间: 5年前

内容简介:作为一名前端,先上代码:大家猜测下结果,我们预期的肯定是不一样的,毕竟中间有修改

作为一名前端, console 估计会时时刻刻陪伴我们,其实各个端都会有输出变量的值的方法,以便调试,这里我指的 console 单纯指的是前端中的 console 。不得不说,它是一个调试的好方法,但它也是不可信的。

一个例子

先上代码:

var obj = {
	name: {
		age: '1'
	}
}
console.log(obj);
obj.name.age = 2;
console.log(obj);
复制代码

大家猜测下结果,我们预期的肯定是不一样的,毕竟中间有修改

但是事实上却是出乎我们意料的

不靠谱的 console

是的,两个都是一样的, console 真的是一个吃里扒外的东西,那到底是为什么呢?

原因

实际上我们输出非对象类型的值的时候,是完全没问题的,比如

不靠谱的 console

所以,我们可以知道, 在使用 console 打印一个 JavaScript 对象的时候,由于对象是引用类型,那么它会一直引用内存中的值,当你输出的时候,对象中的值已经发生了改变,所以才会出现这种打印结果不正确的情况

另外,从上面可以看出,在浏览器环境中, console.log() 实际上也是一种异步的方法

对此,《你不知道的javascript中卷》第二部分异步和性能1.1节异步控制台部分有提及:

并没有什么规范或一组需求指定 console.* 方法族如何工作——它们并不是 JavaScript 正式的一部分,而是由宿主环境(请参考本书的“类型和语法”部分)添加到 JavaScript 中的。因此,不同的浏览器和 JavaScript 环境可以按照自己的意愿来实现,有时候这会引起混淆。 尤其要提出的是,在某些条件下,某些浏览器的 console.log(..) 并不会把传入的内容立即输出。出现这种情况的主要原因是,在许多程序(不只是 JavaScript )中, I/O 是非常低速的阻塞部分。所以,(从页面/ UI 的角度来说)浏览器在后台异步处理控制台 I/O 能够提高性能,这时用户甚至可能根本意识不到其发生。

node 环境中的 console

上面我们分析是在浏览器环境中,那么在 node 环境中会出现上面的情况么?

不靠谱的 console

从上面可以看出, node 环境中是不存在情况的

解决方法

方法一

使用 JSON.stringify ,原理是将它转换成字符串输出,这样就不会在引用原有的对象的内存,如下所示

不靠谱的 console

方法二

打断点,这种方法是最合适的,也是我们前端最正确的打开方式


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品觉醒:产品经理的视角与方法论

产品觉醒:产品经理的视角与方法论

判官(李泽澄) / 电子工业出版社 / 2018-11 / 59.80元

《产品觉醒:产品经理的视角与方法论》是作者多年工作经验的汇集,通过自己亲身经历来对产品运营、行业和人生选择做一个全面的复盘,为读者提供有一定深度的分析。 《产品觉醒:产品经理的视角与方法论》共7章,第1章介绍了产品经理应该具有的视角来分析和观察产品分析方法;第2章介绍了做产品时如何破局来解决相应的问题;第3章介绍了在做产品经理前先分析自己;第4章介绍了怎么来解决执行力的问题;第5章介绍了怎么......一起来看看 《产品觉醒:产品经理的视角与方法论》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具