聊⼀聊JS输出为[objectobject]是怎么回事?
今天在学习ES6中的 Symbol 数据类型时,在写demo时控制台输出为 Symbol[object object] ,当时有点疑惑,查阅了相关资料后搞清楚了其中的原因。
在解释之前,由于有些⼩伙伴可能还没有接触过ES6,所以先说⼀下上⾯⽤到的ES6的⼀些特性:
const: 声明⼀个常量
Symbol:JS中的第7种数据类型,表⽰独⼀⽆⼆的值。Symbol类型的值有Symbol函数⽣成。
如 var s1 = Symbol("abc"); // ⽣成Symbol类型的值s=Symbol(abc) 这个值是独⼀⽆⼆的。
var s2 = Symbol("abc"); // s2 = Symbol(abc)
console.log(s1 === s2) // false, 说明这两个值是不相等的
如果 Symbol 的参数是⼀个对象,那么就会调⽤ toString() ⽅法先将其转换为字符串。
关于 Symbol 更详细的介绍可以参考阮⼀峰⽼师的。
现在上那段输出 Symbol[object object] 的代码:
const obj = {
f() {
return "abc";
}
};
const sym = Symbol(obj);
console.log(sym); // Symbol[object object]
由于 obj 是⼀个对象,所以会调⽤ toString() ⽅法将其转换为字符串,对 toString ⽅法不太了解的⼩伙伴可以查看下⾯MDN的解释:
除了null和undefined之外,其他的类型(数值、布尔、字符串、对象)都有toString()⽅法,它返回相应值的字符串表现(并不修改原变量)。
每个对象都有⼀个toString()⽅法。
当该对象被表⽰为⼀个⽂本值时,或者⼀个对象以预期的字符串⽅式引⽤时⾃动调⽤。
默认情况下,toString()⽅法被每个Object对象继承。如果此⽅法在⾃定义对象中未被覆盖,toString()返回 "[object type]",其中type是对象的类型。
obj是我们⾃定义的对象,⽽且 toString() ⽅法也没有被覆盖,所以会返回 [object object]。
现在我们尝试覆盖 toString() ⽅法,如下⾯的代码所⽰:
// ES5写法
var obj = {
toString: function() {
return "abc";
}
阮一峰js标准参考教程};
// ES6写法
const obj = {
toString() {
return "abc";
}
};
const sym = Symbol(obj);
console.log(sym); // Symbol(abc)
当我们覆盖掉 toString() ⽅法之后,⾃定义对象 obj 在调⽤ toString() ⽅法的时候调⽤的就是我们⾃定义的 toString() ⽅法,输出为 "abc" 。因此最终的结果为Symbol(abc)。
完,如有不恰当之处欢迎指正哦。