前端复习--javascript 对象作为对象的属性名字的研究

问题提出:解释下面的输出结果

var a={},
b={key:'b'},
c={key:'c'};

a[b]=123;
a[c]=456;

console.log(a[b]); //456

(1)   http://stackoverflow.com/questions/8892465/javascript-object-object-meansThat's because property names are strings, but your 

b

 and 

c

 areobjects. Therefore, they are stringified:

b + ''; // "[object Object]"
c + ''; // "[object Object]"
b + '' === c + ''; // true

Your keys are being converted to strings. The string representation is 

"[object Object]"

. All you're doing in both cases is this:实际的效果:

a["[object Object]"] = 123;
a["[object Object]"] = 456;

以下代码可以证明:

var a={},
b={key:'b'},
c={key:'c'};

a[b]=123;
a[c]=456;

console.log(Object.keys(a));

(2)为什么会发生上述情况:

首先,a[b], b其实调用了toString()方法,注意不是valueOf方法. 由于任何对象调用默认的toString方法,输出的结果都是

"[object Object]",所以a[b],a[c]

参考mdn的说法:

<span style="margin: 0px; padding: 0px; border: 0px; font-size: 14px; font-weight: 700; color: rgb(77, 78, 83); font-family: "Open Sans", Arial, sans-serif; background-color: rgb(255, 244, 204);">Note:</span><span style="color: rgb(77, 78, 83); font-family: "Open Sans", Arial, sans-serif; line-height: 18px; background-color: rgb(255, 244, 204);"> Objects in string contexts convert via the </span><a target=_blank href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString" title="The toString() method returns a string representing the object." style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: "Open Sans", Arial, sans-serif; line-height: 18px; background-color: rgb(255, 244, 204);"><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, "Liberation Mono", Courier, monospace; word-wrap: break-word;">toString()</code></a><span style="color: rgb(77, 78, 83); font-family: "Open Sans", Arial, sans-serif; line-height: 18px; background-color: rgb(255, 244, 204);"> method, which is different from </span><a target=_blank href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters." style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: "Open Sans", Arial, sans-serif; line-height: 18px; background-color: rgb(255, 244, 204);"><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, "Liberation Mono", Courier, monospace; word-wrap: break-word;">String</code></a><span style="color: rgb(77, 78, 83); font-family: "Open Sans", Arial, sans-serif; line-height: 18px; background-color: rgb(255, 244, 204);"> objects converting to string primitives using </span><code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, "Liberation Mono", Courier, monospace; word-wrap: break-word; color: rgb(77, 78, 83); line-height: 18px; background-color: rgb(255, 244, 204);">valueOf</code><span style="color: rgb(77, 78, 83); font-family: "Open Sans", Arial, sans-serif; line-height: 18px; background-color: rgb(255, 244, 204);">. All objects have a string conversion, if only "</span><code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, "Liberation Mono", Courier, monospace; word-wrap: break-word; color: rgb(77, 78, 83); line-height: 18px; background-color: rgb(255, 244, 204);">[object <span style="margin: 0px; padding: 0px; border: 0px;">type</span>]</code><span style="color: rgb(77, 78, 83); font-family: "Open Sans", Arial, sans-serif; line-height: 18px; background-color: rgb(255, 244, 204);">".</span>

<span style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif;">那么何时使用valueOf,何时使用toString,两者又有什么不同呢?</span>

<span style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif;">   https://developer.mozilla.org/en-US/docs/Glossary/Primitive</span>

<span style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif;">   https://medium.com/@kevincennis/object-object-things-you-didn-t-know-about-valueof-38f2a88dfb33#.z6roh8i2a </span>

<span style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif;">   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf</span>

<span style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif;">   http://stackoverflow.com/questions/8892465/javascript-object-object-means</span>

<span style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif;">   </span>

<span style="font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif;">var a = {key1:1};</span>

var b = {key2:2};

//调用valueOf(),输出是不同的
a.valueOf();
b.valueOf();

//调用toString(),都输出 "[object Object]"
a.toString();  //"[object Object]"
b.toString();  //"[object Object]"

</pre><pre code_snippet_id="1904436" snippet_file_name="blog_20160928_25_489189" name="code" class="javascript">

另一个问题:

. 和 [] 的区别,

如下的代码,如何解释:

a[b] //456

a.b  //undefined

</pre><pre code_snippet_id="1904436" snippet_file_name="blog_20160928_23_5473462" name="code" class="javascript">解释:

<table style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; border-spacing: 0px; border-collapse: collapse; width: 660px; color: rgb(36, 39, 41); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; line-height: 16.9px;"><tbody data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true" style="margin: 0px; padding: 0px; border: 0px;"><tr id="comment-46770787" class="comment " style="margin: 0px; padding: 0px; border: 0px;"><td class="comment-text" style="margin: 0px; padding: 6px 6px 6px 0px; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: rgb(239, 240, 241); font-size: 13px; vertical-align: top; line-height: 1.3;"><div class="comment-body" style="margin: 0px; padding: 0px; border: 0px;"><span class="comment-copy" style="margin: 0px; padding: 0px; border: 0px;">
Just out of curiosity, if you don't mind: This seems to be "working" if you instead used a.b=123, a.c=456. Is this only because using [ ] to retrieve a property converts it to string, or am I confused?</span> – <a target=_blank href="http://stackoverflow.com/users/1996783/mackan" title="4,010 reputation" class="comment-user" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 119, 204); text-decoration: none; cursor: pointer; white-space: nowrap;">Mackan</a> <span class="comment-date" dir="ltr" style="margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; border-bottom-style: none; border-color: initial; color: rgb(145, 153, 161);"><a target=_blank class="comment-link" href="http://stackoverflow.com/questions/29285901/why-ac-override-ab#comment46770787_29285978" style="margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; border-bottom-style: none; border-color: initial; color: rgb(0, 89, 153); text-decoration: none; cursor: pointer;">Mar 26 '15 at 19:00</a></span></div></td></tr><tr id="comment-46770843" class="comment " style="margin: 0px; padding: 0px; border: 0px;"><td class="comment-actions" style="margin: 0px; padding: 6px 6px 6px 0px; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: rgb(239, 240, 241); font-size: 13px; width: 15px; vertical-align: top; line-height: 1.3;"><table style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; border-spacing: 0px; border-collapse: collapse;"><tbody style="margin: 0px; padding: 0px; border: 0px;"><tr style="margin: 0px; padding: 0px; border: 0px;"><td class=" comment-score" style="margin: 0px; padding: 0px; border: 0px; font-size: 13px;"><span title="number of 'useful comment' votes received" class="cool" style="margin: 0px; padding: 0px 4px 0px 0px; border: 0px; color: rgb(145, 153, 161);">1</span></td><td style="margin: 0px; padding: 0px; border: 0px; font-size: 13px;"> </td></tr></tbody></table></td><td class="comment-text" style="margin: 0px; padding: 6px 6px 6px 0px; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: rgb(239, 240, 241); font-size: 13px; vertical-align: top; line-height: 1.3;"><div class="comment-body" style="margin: 0px; padding: 0px; border: 0px;"><span class="comment-copy" style="margin: 0px; padding: 0px; border: 0px;">@Mackan No, because then you're literally using <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">b</code> and <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">c</code> as the property names. You're using <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">a.b</code> which is the same as <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mo
c18f
no", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">a['b']</code> which is the same as <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">{a: {b: 123}}</code>. When you write <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">a.b</code>, the property name<code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">b</code> is <span style="margin: 0px; padding: 0px; border: 0px;">not</span> evaluated as a variable. It has nothing to do with your <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">b</code> variable. If you wrote <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">a.name</code>, it wouldn't matter if there was a <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">name</code> variable in scope, you're still working with the "name" property on the object "a".</span> – <a target=_blank href="http://stackoverflow.com/users/229044/meagar" title="134,592 reputation" class="comment-user" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 119, 204); text-decoration: none; cursor: pointer; white-space: nowrap;">meagar<span class="mod-flair" title="moderator" style="margin: 0px 0px 0px 3px; padding: 0px; border: 0px; font-size: 15px; font-weight: bold; line-height: 1;">♦</span></a> <span class="comment-date" dir="ltr" style="margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; border-bottom-style: none; border-color: initial; color: rgb(145, 153, 161);"><a target=_blank class="comment-link" href="http://stackoverflow.com/questions/29285901/why-ac-override-ab#comment46770843_29285978" style="margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; border-bottom-style: none; border-color: initial; color: rgb(0, 89, 153); text-decoration: none; cursor: pointer;">Mar 26 '15 at 19:02</a></span> <span class="edited-yes" title="this comment was edited 3 times" style="margin: 0px; padding: 0px; border: 0px; overflow: hidden; display: inline-block; vertical-align: text-bottom; line-height: 12px; height: 15px; width: 16px; background-image: url("img/sprites.svg?v=8c1c8cba242e"), none; background-size: initial; background-position: -20px -340px; background-repeat: no-repeat;"></span></div></td></tr><tr id="comment-46771316" class="comment " style="margin: 0px; padding: 0px; border: 0px;"><td style="margin: 0px; padding: 6px 6px 6px 0px; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: rgb(239, 240, 241); font-size: 13px; vertical-align: top; line-height: 1.3;"><table style="margin: 0px; padding: 0px; border: 0px; font-size: 13px; border-spacing: 0px; border-collapse: collapse;"><tbody style="margin: 0px; padding: 0px; border: 0px;"><tr style="margin: 0px; padding: 0px; border: 0px;"><td class=" comment-score" style="margin: 0px; padding: 0px; border: 0px; font-size: 13px;"></td><td style="margin: 0px; padding: 0px; border: 0px; font-size: 13px;"> </td></tr></tbody></table></td><td class="comment-text" style="margin: 0px; padding: 6px 6px 6px 0px; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: rgb(239, 240, 241); font-size: 13px; vertical-align: top; line-height: 1.3;"><div class="comment-body" style="margin: 0px; padding: 0px; border: 0px;"><span class="comment-copy" style="margin: 0px; padding: 0px; border: 0px;">Right, so using <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">a[b]</code> tries to evaluate <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">b</code> in some sense, but since it's an object it can't and instead it's stingyfied. So <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">a[b.key]</code> would actually be <code style="margin: 0px; padding: 1px 5px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; background-color: rgb(239, 240, 241);">a['b'] == a.b</code> I assume. Got a a bit caught up in the difference between using periods and []. (edit: I see that you edited while I wrote my response. Thanks, got it!)</span>– <a target=_blank href="http://stackoverflow.com/users/1996783/mackan" title="4,010 reputation" class="comment-user" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 119, 204); text-decoration: none; cursor: pointer; white-space: nowrap;">Mackan</a> <span class="comment-date" dir="ltr" style="margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; border-bottom-style: none; border-color: initial; color: rgb(145, 153, 161);"><a target=_blank class="comment-link" href="http://stackoverflow.com/questions/29285901/why-ac-override-ab#comment46771316_29285978" style="margin: 0px; padding: 0px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; border-bottom-style: none; border-color: initial; color: rgb(0, 89, 153); text-decoration: none; cursor: pointer;">Mar 26 '15 at 19:17</a></span> </div></td></tr></tbody></table>

</pre>