即使是写教程的笔者,也不能记下JS的所有细节。那我是怎么保证自己写出靠谱的JS程序呢?
就是使用浏览器自带的控制台,如Chrome的Console,来快速实验自己即将使用却遗忘了的细节。
# console.dir
与大家常用的console.log不同的是,console.dir并不用于日志输出,而是一个打印JS变量结构的函数。
~~~
var str='ES';
console.dir(str);
var obj={ name: 'ES' };
console.dir(obj);
~~~
![](https://box.kancloud.cn/f299c7ba3f30b5848aa2bcd40763c11e_190x71.jpg)
使用console.dir打印变量后,点击左侧的三角展开他的结构。
可以看到,打印str只有ES两个字符。
而打印obj,会显示类名(*Object*),字段(*name*)和对应值(*\"ES\"*),以及\_\_proto\_\_属性。
以上打印条目的差异,是由他们的类型来决定的。
ES的类型分成两种,值类型和引用类型。
当使用console.dir打印变量时:
* 如果是值类型,仅仅输出他的值。
* 如果是引用类型,则输出他的类名,自定义的属性和\_\_proto\_\_属性。
使用console.dir有两个好处,一个就是有助于我们直观地分辨值类型和引用类型。
另一个好处就是,我们可以用鼠标展开对象的属性节点,直观地浏览对象的结构。
![](https://box.kancloud.cn/95d884dd02e38196e3b5a18b9ea716ba_438x246.jpg)