深入理解 Getter和Setter 對物件的屬性監聽

龍恩0707發表於2019-01-26
物件

閱讀目錄

一：理解普通物件在宣告時新增 get、set

在做vue的時候，我們經常會看到 data裡面的屬性 都有 get 和 set方法，如下所示：

如上vue中data裡面它有兩個屬性，一個xxx 陣列 和 一個 testA物件，但是都有get和set方法。也就是說在vue中data裡面的每個屬性都有兩個相對應的get和set方法。為什麼會有這樣的呢？下面我們先來看一個普通的物件，如下程式碼所示：

const obj = {
  name: 'kongzhi',
  _age: 30,
  get age() {
    return this._age;
  },
  set age(x) {
    this._age = x;
  }
};

console.log(obj);

列印會如下所示：

當我們繼續列印如下資訊：

console.log(obj._age); // 輸出：30 
console.log(obj.age); // 輸出：30

// 設定值
obj.age = 31;

console.log(obj.age); // 輸出：31

console.log(obj.age()); // Uncaught TypeError: obj.age is not a function

如上程式碼演示所示，我們在物件裡面使用 get 或 set定義的 age, 它只是obj中的一個屬性，它並不是方法，因此如上我們使用獲取屬性的值或設定屬性的值操作是正常的，當我們使用 obj.age() 把它當做一個方法呼叫的時候，它會報錯。因此在vue中所有的屬性有get、set這樣的，當我們自動給某個屬性賦值的時候，它會自動呼叫 set對應的方法，當我們獲取某個屬性的時候，它會自動呼叫get方法。但是我們不能手動呼叫 set/get xxx() 中的xxx這樣的方法。

二：Object.prototype.__defineGetter__ 和 Object.prototype.__defineSetter__

上面只是在宣告obj物件的時候，編寫get和set 對應的屬性。但是如果已經存在的物件的時候，再想繼續新增 get/set呢？那只有使用

Object.prototype.__defineGetter__ 和 Object.prototype.__defineSetter__ 了，如下程式碼演示：

const obj = {
  name: 'kongzhi',
  _age: 30
};

obj.__defineGetter__('age', function(){
  console.log('監聽到正在獲取屬性age的值');
  return this._age;
});

obj.__defineSetter__('age', function(value) {
  console.log('監聽到正在設定屬性age的值為：' + value);
  this._age = value;
});

/*
 * 列印：監聽到正在獲取屬性age的值
 * 輸出：30
*/
console.log(obj.age);

// 列印：監聽到正在設定屬性age的值為：31
obj.age = 31;

/*
 * 列印：監聽到正在獲取屬性age的值
 * 輸出： 31
*/
console.log(obj.age);

但是呢？Object.prototype.__defineGetter__ 和 Object.prototype.__defineSetter__ 這個方法已經不推薦使用了，並且隨著以後瀏覽器的發展，可能會不再支援該方法，那怎麼辦呢？當然會有新的替代方案的，我們繼續往下講。

三：Object.defineProperty

該方法它是由兩部分組成，分別是：資料描述符和訪問器描述符，資料描述符的含義是：它是一個包含屬性的值，並說明這個屬性值是可讀或不可讀的物件。訪問器描述符的含義是：包含該屬性的一對 getter/setter方法的物件。

那麼具體項瞭解該方法的使用及詳解，請看我這篇文章(https://www.cnblogs.com/tugenhua0707/p/10261170.html)，下面看使用 Object.defineProperty 來監聽物件屬性值的變化，如下程式碼:

const obj = {
  name: 'kongzhi',
  _age: 30
};
Object.defineProperty(obj, 'age', {
  get() {
     console.log('監聽到正在獲取屬性age的值');
     return this._age;
  },
  set(value) {
    console.log('監聽到正在設定屬性age的值為：' + value);
    this._age = value;
    return this._age;
  }
});

/*
 * 列印：監聽到正在獲取屬性age的值
 * 輸出：30
*/
console.log(obj.age);

// 列印：監聽到正在設定屬性age的值為：31
obj.age = 31;

/*
 * 列印：監聽到正在獲取屬性age的值
 * 輸出： 31
*/
console.log(obj.age);

四：Object.defineProperties

Object.defineProperties 是對 Object.defineProperty的擴充套件的，它可以一次性新增多個/修改多個物件屬性描述符。
如下程式碼演示：

const obj = {
  _name: 'kongzhi',
  _age: 30
};
Object.defineProperties(obj, {
  age: {
    get() {
      console.log('監聽到正在獲取屬性age的值');
      return this._age;
    },
    set(value) {
      console.log('監聽到正在設定屬性age的值為：' + value);
      this._age = value;
      return this._age;
    }
  },
  name: {
    get() {
      console.log('監聽到正在獲取屬性name的值');
      return this._name;
    },
    set(value) {
      console.log('監聽到正在設定屬性name的值為：' + value);
      this._name = value;
      return this._name;
    }
  }
});
/*
 * 列印：監聽到正在獲取屬性age的值
 * 輸出：30
*/
console.log(obj.age);

// 列印：監聽到正在設定屬性age的值為：31
obj.age = 31;

/*
 * 列印：監聽到正在獲取屬性age的值
 * 輸出： 31
*/
console.log(obj.age);

console.log('-------下面是物件name屬性的監聽-------');
/*
 * 列印：監聽到正在獲取屬性name的值
 * 輸出：kongzhi
*/
console.log(obj.name);

// 列印：監聽到正在設定屬性name的值為：longen
obj.name = 'longen';

/*
 * 列印：監聽到正在獲取屬性name的值
 * 輸出： longen
*/
console.log(obj.name);

五：Proxy

那麼具體瞭解Proxy是啥，是幹啥使用的，請看我這篇文章(https://www.cnblogs.com/tugenhua0707/p/10306793.html);

那麼它也可以監聽物件屬性值的變化，如下程式碼演示：

const target = {
  name: 'kongzhi'
};

const handler = {
  get: function(target, key) {
    console.log(`${key} 被讀取`);
    return target[key];
  },
  set: function(target, key, value) {
    console.log(`${key} 被設定為 ${value}`);
    target[key] = value;
  }
};

const testObj = new Proxy(target, handler);

/*
  獲取testObj中name屬性值
  會自動執行 get函式後 列印資訊：name 被讀取 及輸出名字 kongzhi
*/
console.log(testObj.name);

/*
 改變target中的name屬性值
 列印資訊如下： name 被設定為 111 
*/
testObj.name = 111;

console.log(target.name); // 輸出 111

相關文章