聊一聊 JS 輸出為 [object object] 是怎麼回事？

聊一聊 JS 輸出為 [object object] 是怎麼回事？

今天在學習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 更詳細的介紹可以參考阮一峰老師的ES6標準入門。

現在上那段輸出 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";
    }
};

// ES6寫法
const obj = {
    toString() {
        return "abc";
    }
};

const sym = Symbol(obj);
console.log(sym); // Symbol(abc)

當我們覆蓋掉 toString() 方法之後，自定義對象 obj 在調用 toString() 方法的時候調用的就是我們自定義的 toString() 方法， 輸出為 "abc" 。因此最終的結果為 Symbol(abc)。

完，如有不恰當之處歡迎指正哦。