深入理解ES6 006【學習筆記】

Symbol與Symbol屬性

第6種原始資料型別（Primitive Data Type）：Symbol。私有名稱原本是為了讓開發者們建立非字串屬性名稱而設計的，但是一般的技術無法偵測這些屬性（Property）的私有名稱。

建立Symbol

let firstName = Symbol();
let person = {}
person[firstName] = "Nicholas";
console.log(person[firstName]); // Nicholas 

new Symbol() 會報錯，Symbol函式（Function）接受一個可選參數，其可以讓你新增一段文字描述即將建立的Symbol，這段描述不可用於屬性存取，但是建議你在每次建立Symbol時都新增一段描述，以便於閱讀程式碼和偵錯Symbol程式。

let firstName = Symbol('first name');
let person = {}
person[firstName] = "Nicholas"
console.log("first name" in person); // false
console.log(person[firstName]); //Nicholas
console.log(firstName) // "Symbol(first name)"

Symbol的描述被儲存在內部的[[Description]]屬性（Property）中，只有當呼叫Symbol的toString()方法才可以讀取這個屬性，在執行console.log時，隱式呼叫了firstName的toString()方法，所以它的描述會被印到日誌中，但是不能直接在程式碼裡存取[[Description]]。

使用typeof symbol 如果是會回傳'symbol'，所有使用計算屬性名（Computed Property Name）的地方，都可以使用Symbol。

Symbol的使用方法

我們之前都是在括號中使用Symbol，事實上，Symbol也可以用於可計算物件（Object）字面值屬性（Literal Property）、Object.defineProperty()方法和Object.defineProperties()方法的呼叫過程。

let fristName = Symbol("first name");
// 使用一個可計算物件這字面量屬性
let person = {
  [firstName]:"Nicholas"
}
// 將屬性設定為唯讀
Object.defineProperty(person,firstName,{writable:false})

let lastName = Symbol('last name');

Object.defineProperties(person,{
  [lastName]:{
    value:"Zakas",
    writable:false
  }
})
console.log(person[firstName]) //Nicholas
console.log(person[lastName]) //Zakas

雖然在所有使用計算屬性名（Computed Property Name）的地方，都可以使用Symbol來替代，但是為了在不同的程式碼片段間有效地共享這些Symbol，需要建立一個體系。

Symbol共享體系

例如我們想在不同的物件（Object）型別，想使用同一個Symbol屬性（Property）來表示一個獨特的識別符號。在很大的程式碼庫或跨檔案追蹤Symbol非常困難且容易出錯，出於這些原因，ES6提供了一個可以隨時存取全域Symbol註冊表。使用Symbol.for(xxx) 只接受一個參數。要建立Symbol的字串描述類似Symbol('xxx')。 Symbol.for(xxx)會去全域註冊表中找有沒有註冊這個Symbol，有就回傳，沒有就建立一個並註冊到全域表中，下次不用再新建一個了。

Symbol與型別轉換

我上面的範例使用console.log()方法來輸出Symbol的內容，它會呼叫Symbol的String()方法輸出有用資訊，如果你試圖將一個Symbol和一個字串拼接，會導致程式拋出錯誤。

let uid = Symbol.for("uid"),
desc = String(uid);
console.log(desc); // Symbol(uid)

Symbol的屬性檢索

Object.keys()和Object.getOwnPropertyNames()方法可以檢索物件（Object）中所有的屬性名（Property Name），後一個方法不考慮屬性（Property）的可列舉性（Enumerable）一律回傳。這兩個方法都支援Symbol屬性。所以又推出了一個Object.getOwnPropertySymbols()方法回傳一個包含所有Symbol自有屬性（Own Property）的值。

let uid = Symbol.for("uid");
let object = {
  [uid]:"12345"
}
let symbols = Object.getOwnPropertySymbols(object);
console.log(symbols.length) // 1
console.log(symbols[0]) // "Symbol(uid)"
console.log(object[symbols[0]]) //12345

透過well-known Symbol揭露內部操作

• Symbol.hasInstance
• Symbol.isConcatSpreadable
• Symbol.iterator
• Symbol.match
• Symbol.replace
• Symbol.species
• Symbol.split
• Symbol.species
• Symbol.toPrimitive
• Symbol.toStringTag
• Symbol.unscopables

obj instanceof Array;
// 等價於
Array[Symbol.hasInstance](obj)
// 本質上，es6只是將instanceof運算子（Operator）重新定義為此方法的簡寫語法，現在引入呼叫後，就可以隨意改變instanceof的執行方式了。
// 假設你想定義一個無實例的函式（Function），就可以將Symbol.hasInstance的回傳值硬編碼為false
function MyObject(){
  // 空函式
}
Object.defindProperty(MyObject,Symbol.hasInstance,{
  value:function(v){
    return false
  }
})
let obj = new MyObject()
console.log(obj instanceof MyObject) // false

Symbol.isConcatSpreadable

JavaScript陣列（Array）的concat方法被設計用於拼接兩個陣列，使用如下方法：

let color1 =["red","green"],
color2 = color1.concat(["blue","black"])
console.log(color2.length) // 4
console.log(color2) // ["red","green","blue","black"]

// color1與一個臨時陣列拼接成兩個陣列
// concat方法也可以接受非陣列（Array）參數，此時該方法只會將這些參數逐一新增到陣列末尾如下。
let color1 =["red","green"],
color2 = color1.concat(["blue","black"],"brown")
console.log(color2.length) // 5
console.log(color2) // ["red","green","blue","black","brown"]
// 這個屬性（Property）可以設定或阻止呼叫concat方法時是否展開。