JavaScript get set方法 ES5/ES6寫法

網上鮮有get和set的方法的實例，在這邊再mark一下。

get和set我個人理解本身只是一個語法糖，它定義的屬性相當於“存儲器屬性”

為內部屬性提供了一個方便習慣的讀/寫方式

ES5寫法

function Number(num) {
  this._num = num           //這里的_num和get/set方法num()不能重名
}

//get/set方法使用同一個命名，增加可讀性
Number.prototype = {
  get num() {
    return this._num;
  },
  
  set num(num) {
        this._num = num;
  }
}

var test = new Number(8);
console.log(test.num);
test.num = 88;
console.log(test.num);

輸出：

>8

>88

 

在這里，定義了Number類的一個值_num，再原型中注入set和get方法，此時就可以使用test.num取值和賦值，更加直觀。

ES6寫法

再看看用ES6中class的實現：

class Num {
  constructor(num) {
        this._num = num;
  }
  
  get num() {
    return this._num;
  }
  
  set num(num) {
    this._num = num;
  }
  
}

var test = new Num(9);
console.log(test.num);
test.num = 99;
console.log(test.num);

 

輸出：

>9

>99