聊一聊 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)。

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