javascript中，对象题目的一个坑---详解

今天在CSDN的微博上面看到了一个博文。写的是关于javascript对象的。原文如下：

Javascript中,对象题目的一个坑

2015-12-21 编程的人

这一篇的例子,主要是来引起对Javascript对象的理解,及注意的.其实是一种面试时的一个坑.实际项目中,也是很少用得到.但是为了提高警惕性,我们来看这个例子:

代码名称

var first = {};
var second = {k:"second"};
var third = {k:"third"};
first[second] = 100;
first[third] = 200;
console.log(first[second])//这里会输出什么内容呢?

如果要自己做一下这个题,后面的解释先不看.

这里会输出什么样的结果呢? 可能大部分人会觉得结果是100,或者是题目有错误,再或者是结果是200.

其实最终结果是200.为什么? 因为second,third都是对象,而且都是[object object].因此first[second] 等价于 first[[object object]] 同样 first[third] 等价于 first[[object object]] 所以最终的结果可以是 first["[object object]"], 例子中对这个表达式进行了两次赋值操作.所以最终的结果是200.

所以在javascript中,很多的细节需要我们去注意的.或许就是那些面试者,不知道出什么面试题,尽出这些陷阱式的题目.不过,我们就是需要把基础打牢固了.什么都不怕! 后续我会继续出一些题目来做讲解!

看完了作者的解释。实在是不懂。于是，自己做一堆实验，来确认，结果无误。那么原因是什么呢？？

后面的评论也都在讲不懂。于是，把自己的实验过程贴出来。供大家参考。

1.验证结果：在chrome浏览器上运行示例中的代码，发现结果和作者说的一致，证明作者木有瞎说。

2.原因跟踪：首先跟踪first对象，看对象在这个代码块中是如何变化的。

于是，有了下面的代码：

var first = {};
console.info(first);
var second = {k:"second"};
var third  = {k:"third"};
first[second] = 100;
console.info(first);
first[third] = 200;
console.info(first);
console.info(first[second]);

在不看运行结果，你知道4个输出语句分别输出了什么吗？

第2和9行没有问题。那么6和8呢？第6行和第8行的输出结果，直接决定了最终的结果。

第6行打印结果：{ '[object Object]': 100 }
第8行打印结果：{ '[object Object]': 200 }

于是继续追加一句打印语句：

console.info(first[second] === first[second]);//true

于是去了解JS对象定义的相关问题。首先，JS定义对象有两个方法，一个是用new后面跟一个构造函数，另一个是采用对象字面量的形式。

在本题中，毫无疑问采用的是对象字面量的定义方式。

同时，访问对象属性的方式也有两种，那就是点表示法和方括号表示法。但是，在使用方括号表示法的时候，应该将要访问的属性以字符串的形式放在方括号中。（《JavaScript高级程序设计（第3版）》第5章5.1 Object类型）

于是产生了2个猜测：

1.使用对象字面量的方法来定义对象时，JS会自动把对象属性转换成字符串。

2.使用方括号语法来访问对象属性的时候，JS会自动把方括号的内容进行转换成字符串。严格来讲是先执行了一个toString()方法。

于是，继续验证： 

var person ={
    name:"Tom",
    age:28,
    5:false,
    "name":"Niko"
}
var name = 5;
console.info(person);
console.info(person["name"]);
console.info(person[name]);

结果如下：

{ '5': false, name: 'Niko', age: 28 }
Niko
false

上述结果证明了猜测的正确性。

结论如下：

1.使用对象字面量的方式进行定义对象时，属性的名字可以写成字符串（即带双引号）形式，也可以不用，但是JS会自动将属性名全部转换成字符串，只是不给你看到。（其实就是调用了toString（）方法。）

2.使用方括号表示法来访问对象的属性时，方括号里的内容（要访问的对象属性）必须以字符串的形式展示，否则，JS自行转换为字符串。（其实还是是调用了toString（）方法。）

3.建议：使用对象字面量的方式进行定义对象时，属性的名字应该写成字符串，使用方括号语法访问对象的属性时，也使用字符串。避免出现莫名其妙的结果。

最后，就上述题目做一个展示全部结果的详细例子：

var first = {};
console.info(first);
var second = {k:"second"};
console.info(second.toString());
var third  = {k:"third"};
console.info(first);
console.info(third.toString());
first[second] = 100;
console.info(first);
first[third] = 200;
console.info(first);
console.info(first[second]);