詳談Object.defineProperty 及實現(xiàn)數(shù)據(jù)雙向綁定

更新時間：2020年07月18日 15:38:35 作者：龍恩0707

這篇文章主要介紹了詳談Object.defineProperty 及實現(xiàn)數(shù)據(jù)雙向綁定，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

Object.defineProperty() 和 Proxy 對象，都可以用來對數(shù)據(jù)的劫持操作。何為數(shù)據(jù)劫持呢？就是在我們訪問或者修改某個對象的某個屬性的時候，通過一段代碼進行攔截行為，然后進行額外的操作，然后返回結果。那么vue中雙向數(shù)據(jù)綁定就是一個典型的應用。

Vue2.x 是使用 Object.defindProperty()，來進行對對象的監(jiān)聽的。

Vue3.x 版本之后就改用Proxy進行實現(xiàn)的。

下面我們先來理解下Object.defineProperty作用。

一: 理解Object.defineProperty的語法和基本作用。

在理解之前，我們先來看看一個普通的對象，對象它是由多個名/值對組成的無序集合。對象中每個屬性對于任意類型的值。

比如現(xiàn)在我們想創(chuàng)建一個簡單的對象，可以簡單的如下代碼：

const obj = new Object; // 或 const obj = {};
obj.name = 'kongzhi';
console.log(obj.name); // 在控制臺中會打印 kongzhi
obj.xxx = function() {
 console.log(111);
}
// 調用 xxx 方法
obj.xxx(); // 在控制臺中會打印 111

但是除了上面添加對象屬性之外，我們還可以使用 Object.defineProperty 來定義新的屬性或修改原有的屬性。最終會返回該對象。

接下來我們慢慢來理解下該用法。

基本語法：

Object.defineProperty(obj, prop, descriptor);

基本的參數(shù)解析如下：

obj: 可以理解為目標對象。

prop: 目標對象的屬性名。

descriptor: 對屬性的描述。

那么對于第一個參數(shù)obj 和 prop參數(shù)，我們很容易理解，比如上面的實列demo，我們定義的 obj對象就是第一個參數(shù)的含義，我們在obj中定義的name屬性和xxx屬性是prop的含義，那么第三個參數(shù)描述符是什么含義呢？

descriptor：屬性描述符，它是由兩部分組成，分別是：數(shù)據(jù)描述符和訪問器描述符，數(shù)據(jù)描述符的含義是：它是一個包含屬性的值，并說明這個屬性值是可讀或不可讀的對象。訪問器描述符的含義是：包含該屬性的一對 getter/setter方法的對象。

下面我們繼續(xù)來理解下數(shù)據(jù)描述符和訪問器描述符具體包含哪些配置項含義及用法。

1.1 數(shù)據(jù)描述符

const obj = {
 name: 'kongzhi'
};
// 對obj對象已有的name屬性添加數(shù)據(jù)描述
Object.defineProperty(obj, 'name', {
 configurable: true | false,
 enumerable: true | false,
 value: '任意類型的值',
 writable: true | false
});
// 對obj對象添加新屬性的描述
Object.defineProperty(obj, 'newAttr', {
 configurable: true | false,
 enumerable: true | false,
 value: '任意類型的值',
 writable: true | false
});

如上代碼配置，數(shù)據(jù)描述符有如上configurable，enumerable，value 及 writable 配置項。

下面我們來看下每個描述符中每個屬性的含義：

1）value

屬性對應的值，值的類型可以是任意類型的。比如我先定義一個obj對象，里面有一個屬性 name 值為 'kongzhi', 現(xiàn)在我們通過如下代碼改變 obj.name 的值，如下代碼：

const obj = {
 name: 'kongzhi'
};
// 對obj對象已有的name屬性添加數(shù)據(jù)描述
Object.defineProperty(obj, 'name', {
 value: '1122'
});
console.log(obj.name); // 輸出 1122

如果上面我不設置 value描述符值的話，那么它返回的值還是 kongzhi 的。比如如下代碼：

const obj = {
 name: 'kongzhi'
};
// 對obj對象已有的name屬性添加數(shù)據(jù)描述
Object.defineProperty(obj, 'name', {
 
});
console.log(obj.name); // 輸出 kongzhi

2）writable

writable的英文的含義是：'可寫的'，在該配置中它的含義是：屬性的值是否可以被重寫，設置為true可以被重寫，設置為false，是不能被重寫的，默認為false。

如下代碼：

const obj = {};
Object.defineProperty(obj, 'name', {
 'value': 'kongzhi'
});
console.log(obj.name); // 輸出 kongzhi
// 改寫obj.name 的值
obj.name = 111;
console.log(obj.name); // 還是打印出 kongzhi

上面代碼中使用 Object.defineProperty 定義 obj.name 的值 value = 'kongzhi', 然后我們使用 obj.name 進行重新改寫值，再打印出 obj.name 可以看到值還是為 kongzhi , 這是 Object.defineProperty 中 writable 默認為false，不能被重寫，但是下面我們將它設置為true，就可以進行重寫值了，如下代碼：

const obj = {};
Object.defineProperty(obj, 'name', {
 'value': 'kongzhi',
 'writable': true
});
console.log(obj.name); // 輸出 kongzhi
// 改寫obj.name 的值
obj.name = 111;
console.log(obj.name); // 設置 writable為true的時候 打印出改寫后的值 111

3）enumerable

此屬性的含義是：是否可以被枚舉，比如使用 for..in 或 Object.keys() 這樣的。設置為true可以被枚舉，設置為false，不能被枚舉，默認為false.

如下代碼：

const obj = {
 'name1': 'xxx'
};
Object.defineProperty(obj, 'name', {
 'value': 'kongzhi',
 'writable': true
});
// 枚舉obj的屬性
for (const i in obj) {
 console.log(i); // 打印出 name1
}

如上代碼，對象obj本身有一個屬性 name1, 然后我們使用 Object.defineProperty 給 obj對象新增 name屬性，但是通過for in循環(huán)出來后可以看到只打印出 name1 屬性了，那是因為 enumerable 默認為false，它里面的值默認是不可被枚舉的。但是如果我們將它設置為true的話，那么 Object.defineProperty 新增的屬性也是可以被枚舉的，如下代碼：

const obj = {
 'name1': 'xxx'
};
Object.defineProperty(obj, 'name', {
 'value': 'kongzhi',
 'writable': true,
 'enumerable': true
});
// 枚舉obj的屬性
for (const i in obj) {
 console.log(i); // 打印出 name1 和 name
}

4） configurable

該屬性英文的含義是：可配置的意思，那么該屬性的含義是：是否可以刪除目標屬性。如果我們設置它為true的話，是可以被刪除。如果設置為false的話，是不能被刪除的。它默認值為false。

比如如下代碼：

const obj = {
 'name1': 'xxx'
};
Object.defineProperty(obj, 'name', {
 'value': 'kongzhi',
 'writable': true,
 'enumerable': true
});
// 使用delete 刪除屬性 
delete obj.name;
console.log(obj.name); // 打印出kongzhi

如上代碼使用 delete命令刪除 obj.name的話，該屬性值是刪除不了的，因為 configurable 默認為false，不能被刪除的。但是如果我們把它設置為true，那么就可以進行刪除了。

如下代碼：

const obj = {
 'name1': 'xxx'
};
Object.defineProperty(obj, 'name', {
 'value': 'kongzhi',
 'writable': true,
 'enumerable': true,
 'configurable': true
});
// 使用delete 刪除屬性 
delete obj.name;
console.log(obj.name); // 打印出undefined

如上就是數(shù)據(jù)描述符中的四個配置項的基本含義。那么下面我們來看看訪問器描述符的具體用法和含義。

1.2 訪問器描述符

訪問器描述符的含義是：包含該屬性的一對 getter/setter方法的對象。如下基本語法：

const obj = {};
Object.defineProperty(obj, 'name', {
 get: function() {},
 set: function(value) {},
 configurable: true | false,
 enumerable: true | false
});

注意：使用訪問器描述符中 getter或 setter方法的話，不允許使用 writable 和 value 這兩個配置項。

getter/setter

當我們需要設置或獲取對象的某個屬性的值的時候，我們可以使用 setter/getter方法。

如下代碼的使用demo.

const obj = {};
let initValue = 'kongzhi';
Object.defineProperty(obj, 'name', {
 // 當我們使用 obj.name 獲取該值的時候，會自動調用 get 函數(shù)
 get: function() {
  return initValue;
 },
 set: function(value) {
  initValue = value;
 }
});
// 我們來獲取值，會自動調用 Object.defineProperty 中的 get函數(shù)方法。
console.log(obj.name); // 打印出kongzhi
// 設置值的話，會自動調用 Object.defineProperty 中的 set方法。
obj.name = 'xxxxx';
console.log(obj.name); // 打印出 xxx

注意：configurable 和 enumerable 配置項和數(shù)據(jù)描述符中的含義是一樣的。

1.3：使用 Object.defineProperty 來實現(xiàn)一個簡單雙向綁定的demo

如下代碼：

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>標題</title>
  </head>
  <body>
   <input type="text" id="demo" />
   <div id="xxx">{{name}}</div>
   <script type="text/javascript">
    const obj = {};
    Object.defineProperty(obj, 'name', {
     set: function(value) {
      document.getElementById('xxx').innerHTML = value;
      document.getElementById('demo').value = value;
     }
    });
    document.querySelector('#demo').oninput = function(e) {
     obj.name = e.target.value;
    }
    obj.name = '';
   </script>
  </body>
</html>

1.4 Object.defineProperty 對數(shù)組的監(jiān)聽

看如下demo代碼來理解下對數(shù)組的監(jiān)聽的情況。

const obj = {};
let initValue = 1;
Object.defineProperty(obj, 'name', {
 set: function(value) {
  console.log('set方法被執(zhí)行了');
  initValue = value;
 },
 get: function() {
  return initValue;
 }
});
console.log(obj.name); // 1
obj.name = []; // 會執(zhí)行set方法，會打印信息
// 給 obj 中的name屬性 設置為 數(shù)組 [1, 2, 3], 會執(zhí)行set方法，會打印信息
obj.name = [1, 2, 3];
// 然后對 obj.name 中的某一項進行改變值，不會執(zhí)行set方法，不會打印信息
obj.name[0] = 11;
// 然后我們打印下 obj.name 的值
console.log(obj.name);
// 然后我們使用數(shù)組中push方法對 obj.name數(shù)組添加屬性 不會執(zhí)行set方法，不會打印信息
obj.name.push(4);
obj.name.length = 5; // 也不會執(zhí)行set方法

如上執(zhí)行結果我們可以看到，當我們使用 Object.defineProperty 對數(shù)組賦值有一個新對象的時候，會執(zhí)行set方法，但是當我們改變數(shù)組中的某一項值的時候，或者使用數(shù)組中的push等其他的方法，或者改變數(shù)組的長度，都不會執(zhí)行set方法。

也就是如果我們對數(shù)組中的內部屬性值更改的話，都不會觸發(fā)set方法。

因此如果我們想實現(xiàn)數(shù)據(jù)雙向綁定的話，我們就不能簡單地使用 obj.name[1] = newValue；這樣的來進行賦值了。

那么對于vue這樣的框架，那么一般會重寫 Array.property.push方法，并且生成一個新的數(shù)組賦值給數(shù)據(jù)，這樣數(shù)據(jù)雙向綁定就觸發(fā)了。

因此我們需要重新編寫數(shù)組的push方法來實現(xiàn)數(shù)組的雙向綁定，我們可以參照如下方法來理解下。

1) 重寫編寫數(shù)組的方法：

const arrPush = {};
// 如下是 數(shù)組的常用方法
const arrayMethods = [
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
];
// 對數(shù)組的方法進行重寫
arrayMethods.forEach((method) => {
 const original = Array.prototype[method]; 
 arrPush[method] = function() {
  console.log(this);
  return original.apply(this, arguments);
 }
});
const testPush = [];
// 對 testPush 的原型 指向 arrPush，因此testPush也有重寫后的方法
testPush.__proto__ = arrPush;
testPush.push(1); // 打印 [], this指向了 testPush
testPush.push(2); // 打印 [1], this指向了 testPush

2）使用 Object.defineProperty 對數(shù)組方法進行監(jiān)聽操作。

因此我們需要把上面的代碼繼續(xù)修改下進行使用 Object.defineProperty 進行監(jiān)聽即可：

Vue中的做法如下，代碼如下：

function Observer(data) {
 this.data = data;
 this.walk(data);
}
var p = Observer.prototype;
var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);
[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
].forEach(function(method) {
 // 使用 Object.defineProperty 進行監(jiān)聽
 Object.defineProperty(arrayMethods, method, {
  value: function testValue() {
   console.log('數(shù)組被訪問到了');
   const original = arrayProto[method];
   // 使類數(shù)組變成一個真正的數(shù)組
   const args = Array.from(arguments);
   original.apply(this, args);
  }
 });
});
p.walk = function(obj) {
 let value;
 for (let key in obj) {
  // 使用 hasOwnProperty 判斷對象本身是否有該屬性
  if (obj.hasOwnProperty(key)) {
   value = obj[key];
   // 遞歸調用，循環(huán)所有的對象
   if (typeof value === 'object') {
    // 并且該值是一個數(shù)組的話
    if (Array.isArray(value)) {
     const augment = value.__proto__ ? protoAugment : copyAugment;
     augment(value, arrayMethods, key);
     observeArray(value);
    }
    /* 
     如果是對象的話，遞歸調用該對象，遞歸完成后，會有屬性名和值，然后對
     該屬性名和值使用 Object.defindProperty 進行監(jiān)聽即可
     */
    new Observer(value);
   }
   this.convert(key, value);
  }
 }
}
p.convert = function(key, value) {
 Object.defineProperty(this.data, key, {
  enumerable: true,
  configurable: true,
  get: function() {
   console.log(key + '被訪問到了');
   return value;
  },
  set: function(newVal) {
   console.log(key + '被重新設置值了' + '=' + newVal);
   // 如果新值和舊值相同的話，直接返回
   if (newVal === value) return;
   value = newVal;
  }
 });
}
function observeArray(items) {
 for (let i = 0, l = items.length; i < l; i++) {
  observer(items[i]);
 }
}
function observer(value) {
 if (typeof value !== 'object') return;
 let ob = new Observer(value);
 return ob;
}
function def (obj, key, val) {
 Object.defineProperty(obj, key, {
  value: val,
  enumerable: true,
  writable: true,
  configurable: true
 })
}
// 兼容不支持 __proto__的方法
function protoAugment(target, src) {
 target.__proto__ = src;
}
// 不支持 __proto__的直接修改先關的屬性方法
function copyAugment(target, src, keys) {
 for (let i = 0, l = keys.length; i < l; i++) {
  const key = keys[i];
  def(target, key, src[key]);
 }
}

// 下面是測試數(shù)據(jù)
var data = {
 testA: {
  say: function() {
   console.log('kongzhi');
  }
 },
 xxx: [{'a': 'b'}, 11, 22]
};
var test = new Observer(data);
console.log(test); 
data.xxx.push(33);

以上這篇詳談Object.defineProperty 及實現(xiàn)數(shù)據(jù)雙向綁定就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue配置electron使用electron-builder進行打包的操作方法
這篇文章主要介紹了vue配置electron使用electron-builder進行打包的操作方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-08-08
詳解Jest結合Vue-test-utils使用的初步實踐
這篇文章主要介紹了詳解Jest結合Vue-test-utils使用的初步實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-06-06
antd-DatePicker組件獲取時間值,及相關設置方式
這篇文章主要介紹了antd-DatePicker組件獲取時間值,及相關設置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue-cli3設置代理無效的解決
這篇文章主要介紹了vue-cli3設置代理無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue3中的抽離封裝方法實現(xiàn)
vue3中的任何一個組合式api都可以單獨抽離出去在另一個文件，最后只需要回歸到setup()中即可，這篇文章主要介紹了vue3的抽離封裝方法,需要的朋友可以參考下
2022-08-08
Vue?事件處理函數(shù)的綁定示例詳解
這篇文章主要為大家介紹了Vue?事件處理函數(shù)的綁定示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
vue+iview使用樹形控件的具體使用
這篇文章主要介紹了vue+iview使用樹形控件的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-11-11
vue中v-if失效原因及解決方法
本文主要介紹了vue中v-if失效原因及解決方法,一般v-if失效都是和綁定變量有關,下面就來具體介紹一下,感興趣的可以了解一下
2023-09-09
element用腳本自動化構建新組件的實現(xiàn)示例
本文主要介紹了element-ui的用腳本自動化構建新組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
vue.js的提示組件
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)一個漂亮、靈活、可復用的提示組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03