ES6 Class / Symbol

大纲

物件列举属性 (for-in/Object.keys)物件属性特性设定 (ES5 defineProperty / ES6 Symbol)ES6 Class static / getter / setter

物件 列举属性

Object.keys(obj) 列举属性for-in 迴圈列举原型链上的属性

  const obj = {    name: 'John',    age: 30,  }  obj.isRead = true  // 列举属性  Object.keys(obj) // ['name','age','isRead']  // for-in 迴圈 会列举出包含在原型链中的所有属性  // ESLint 不建议使用此  for (const key in obj) {    // 是否为该物件的属性，而非原型链的    if (obj.hasOwnProperty(key)) {      const elem = object[key]      console.log(elem)    }  }

物件 属性特性设定

Object.defineProperty 设定属性特性ES6 Symbol 无法被 for-in 或 Object.keys 列举

  // ES5 属性不被列举的写法  // 设定属性特性 (是否唯独、可被列举、更改...等)  Object.defineProperty(obj, 'isRead', {    value: true,    writable: true, // 是否可更改属性    enumerable: false, // 使其无法列举  })  // 取得该属性的特性  Object.getOwnPropertyDescriptor(obj, '属性名')

  const isRead = Symbol()  const obj = {    name: 'John',    age: 30  }  obj[isRead] = true  console.log(obj) // {name: 'John', age: 30, Symbol(): true }

ES6 static/get/set

ES6 Static 用法

静态方法不须实例化，即可被呼叫但被实例化后，则静态方法不能被呼叫 (私有方法)常用于工具函式 (资料处理)

  class Calculator {    constructor(str) { this.str = str }    static add(a, b) { console.log(a + b) }    hey() { return this.str }  }  const calculatorA = new Calculator('hey')  // 建立实体后，无法透过实体使用该函式  console.log(calculatorA.add) // undefined  console.log(calculatorA.hey()) // 'hey'  // 没有建立实体即可使用  Calculator.add(1, 4) // 3

ES6 get/set 用法 (仅用于私有属性)

可控制 资料 写入 & 读出的过程可于中间作一些格式处理、错误侦测getter不会有传入参数，setter只会有一个传入参数範例参考于此

  class Option {    constructor(key, value) {      if (typeof key !== 'undefined') { this[`_${key}`] = value }    }    get color() {      if (this._color !== undefined) { return this._color }       return 'no color prop'    }    set color(value) { this._color = value }  }  const op1 = new Option('color', 'red')  op1.color = 'yellow'  const op2 = new Option('action', 'run')  op2.color = 'yellow'

ES5 getter / setter 写法

使用 Object.defineProperty若要使物件的属性无法被更动 writable: false,

  Object.defineProperty(obj, 'key', {    get() {      // 取得值前 可于此作format....etc      return this.name    },    set(val) {      // 设定值前可以作一些 例外判断 (falsy...etc)      this.name = val      console.log(val)    },  })