博客 / 詳情

返回

js中如何監聽一個對象中屬性的變化

  • 訪問器屬性特性

訪問器屬性:這個屬性不包含數據值,包含的是一對get和set方法,在讀寫訪問器屬性時,就是通過這兩個方法來進行操作處理的。

訪問器屬性包含的四個特性:

[[Configurable]]------>>表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或能否把屬性修改為訪問器屬性, 默認為false

[[Enumerable]]------->>表示能否通過for-in循環返回屬性,默認為false

[[Get]]-------->>在讀取屬性時調用的函數,默認值為undefined

[[Set]]-------->>在寫入屬性時調用的函數,默認值為undefined

//訪問器屬性:這個屬性不包含數據值,包含的是一對get和set方法,在讀寫訪問器屬性時,就是通過這兩個方法來進行操作處理的。
var book = {
     _year:2020,  //下劃線表示是內部屬性,只能通過對象的方法來讀寫
     editor: 1
}

//訪問器屬性   Object.defineProperty(obj, prop, descriptor)
// 1. obj:必需。目標對象
// 2. prop:必需。需定義或修改的屬性的名字
// 3. descriptor:必需。目標屬性所擁有的特性
// 可以使用`Object.defineProperty`定義新屬性或修改原有的屬性。
Object.defineProperty(book, 'year', {
     // get 函數    如果只寫了get方法,當前的year屬性就是隻讀的
     get: function () {
          // 返回私有屬性
       return this._year;
     },
     //修改  // 若只指定get方法,不指定set方法,那就默認該屬性是隻讀的
     set:function (newYear) {
          //判斷 如果兩個值不同 
          if (newYear !== this._year) {
               this._year = newYear;
               this.editor++
          }
     }
})
// 測試訪問屬性中的get,set方法
console.log('未修改的year:' + book.year);   //未修改的year:2020

book.year = 2023;
console.log('修改後的year:' + book.year);   //修改後的year:2023
console.log('修改year後的editor:' + book.editor);    //修改year後的editor:2

// 訪問器屬性可以通過Object.getOwnPropertyDescriptor()查詢
console.log(Object.getOwnPropertyDescriptor(book, '_year'));   //{ value: 2023, writable: true, enumerable: true, configurable: true }

由此可以想到vue的雙向數據綁定

user avatar ziyeliufeng 頭像 dujing_5b7edb9db0b1c 頭像 sunhengzhe 頭像 suporka 頭像 niumingxin 頭像 beilee 頭像 clearlove07 頭像 tufeiyuan_5d9f0a380c30e 頭像 yihan123 頭像 xiaojt 頭像 yxaw 頭像 wuyuedexingkong 頭像
23 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.