about one bug of chrome-console

发表于 | 分类于

先看一段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let f = [];
let k = [{a:1,b:2},{a:3,b:4},{a:5,b:6}];
let a = {
		a:null,
		b:null,
	}
	
for(let i=0;i<k.length;i++) {
	a.a=k[i].a;
	a.b=k[i].b;
	f.push(a);
	console.log(a);
	console.log(f);
}

你可以想象一下输出结果是什么？
nodejs 版本为8.0.0在终端输出的结果为： 

1
2
3
4
5
6
{ a: 1, b: 2 }
[ { a: 1, b: 2 } ]
{ a: 3, b: 4 }
[ { a: 3, b: 4 }, { a: 3, b: 4 } ]
{ a: 5, b: 6 }
[ { a: 5, b: 6 }, { a: 5, b: 6 }, { a: 5, b: 6 } ]

你可以把上面的代码粘贴到chrome里面的console控制台里面，按回车键执行，会得到下面的结果：

js
nodejs是基于chrome V8 引擎开发的js解析环境，所以理论上nodejs和chrome浏览器里面的js引擎是同一款，
那么输出的结果也应该是一样的。然后实践出真知，以上的结果出乎我的意料。有人说是因为闭包，作用域等等理论，
也有人说是因为io读写的原因刚刚开始我也以为是这种原因，就胡乱测试。经过一天的思考和资料查阅，
发现一开始的方向就错了。最后得出的结论是：这是由于chrome浏览器存在bug引起的。证明如下：
js2
我在俩个输出语句中打了断点，按F10每次一打印出来，我就用鼠标点开，查看Object的值，可以发现这里的值和
nodejs中输出是一致的。 下面看另一种图：
js3
我同样在俩个输出语句中打了断点，按F10每一次打印出来，我先不用鼠标点开。等到跳过了所有断点，我再点开每一个
Object值，结果同浏览器输出的结果一样。

结论(猜测)

由于是黑盒测试，所以是猜测：chrome浏览器可能为了方便处理开发者工具里面的console，在用户没有点开Object值之前，是不会渲染Object
内存里面的值。等用户真正点开的时候，console才会渲染Object所在内存的值。所以在我们打断点的时候，每执行一次，点开查看Object就会
出现和nodejs一样的值；而另外一种情况，等到都执行完再点开查看Object就会看到最后内存中的值。
可能解释的不是很清楚。自己亲手做一遍就知道了。

PS！！！！！！

最近还有很多有关js、css、react、nodejs等需要总结的东西。还有react各种组件的封装，也想实现一遍哇。还有几个开源项目也只做了一个开头，
还得继续抽时间写哇。周末不看动漫了，(:,好好写代码！！！(最近有好几部喜欢看的新番，怎么能不看呢，23333，周末还要去游泳，代码随它去吧。