JavaScript中get和set訪問器的實現

在學習Vue的時候咱們知道它的響應式數據原理就是經過Object.defineProperty進行重寫定義的，主要是利用get和set屬性訪問器實現的，接下來看看get和set屬性訪問器的實現原理

1.ES6的實現方法

js容許在運行時向對象添加狀態，而且能夠添加行爲。爲了提升抽象能力，js的屬性被設計成了更加複雜的形式，它提提供了兩類屬性getter/setter，做爲其數據屬性和訪問器屬性。也能夠簡單的理解爲，getter 是一種得到屬性值的方法，setter是一種設置屬性值的方法。

• getter負責查詢值，它不帶任何參數，setter則負責設置鍵值，值是以參數的形式傳遞，在他的函數體中，一切的return都是無效的
• get/set訪問器不是對象的屬性，而是屬性的特性，特性只有內部才用，所以在javaScript中不能直接訪問他們，爲了表示特性是內部值用兩隊中括號括起來表示如[[Value]]

class Person {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
                
    set name(name) {
        console.log("setter");
        this.name = name;
    }
                
    get name() {
        console.log("getter");
        return this.name;
    }
}

2.Object.defineProperty

Object.defineProperty(obj,prop, descriptor)

參數：

• obj：目標對象，
• prop：須要定義的屬性和方法名稱，
• descriptor:目標屬性所擁有的特性。

可供定義的特性列表：

• value:屬性的值
• writable:若是爲false，屬性的值就不能被重寫。
• get: 一旦目標屬性被訪問就會調回此方法，並將此方法的運算結果返回用戶。
• set:一旦目標屬性被賦值，就會調回此方法。
• configurable:若是爲false，則任未嘗試刪除目標屬性或修改屬性如下特性（writable, configurable, enumerable）的行爲將被無效化。
• enumerable:是否能在for...in循環中遍歷出來或在Object.keys中列舉出來。

var lost = {
loc : "Island"
};
Object.defineProperty(lost, "location", {
get : function () {
  return this.loc;
},
set : function (val) {
  this.loc = val;
}
});