详解Object.defineProperty
生活随笔
收集整理的這篇文章主要介紹了
详解Object.defineProperty
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Object.defineProperty
3個參數
- obj: 可以理解為目標對象。
- prop: 目標對象的屬性名。
- descriptor: 對屬性的描述。
descriptor可分為數據屬性和訪問器屬性兩類
//4個數據描述符value，configurable，enumerable，writablelet obj = {};Object.defineProperty(obj, "name", {value: 'ddd',// 這三個參數默認都為falseconfigurable: true, // 是否可刪除enumerable: true, // 是否可枚舉writable: true, // 是否可修改}) //訪問器描述符的含義是：包含該屬性的一對 getter/setter方法的對象let obj = {};Object.defineProperty(obj, 'name', {configurable: false, //是否可刪除enumerable: false,// 是否可枚舉get() {},set(newValue) {}})注意：
1,使用訪問器描述符中 getter或 setter方法的話，不允許使用 writable 和 value 這兩個配置項。
2,不能在set方法里設置當前的屬性值.會報棧溢出.原因是會造成死循環。
簡單實現數據雙向綁定
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><h1>簡單實現數據雙向綁定</h1><input type="text" id="inp"><p></p></head><body><script>const inp = document.getElementById('inp')const p = document.getElementsByTagName('p')[0]const obj = { text: '' }inp.oninput = (e) => {obj.text = e.target.value}Object.defineProperty(obj, 'text', {set(v) {inp.value = vp.innerHTML = v}})</script> </body></html>對數組的監聽
const obj = {}let a = 1;Object.defineProperty(obj, 'arr', {get() {return a},set(v) {console.log('set執行', v)a = v}})obj.arr = [] //set執行obj.arr = [1, 2, 3] // 給obj中的arr屬性添加1,2,3, 會執行set方法obj.arr[0] = 3 //set不執行obj.arr.push(4) // set不執行obj.name.length = 5 // 也不會執行set方法如上執行結果我們可以看到，當我們使用 Object.defineProperty 對數組賦值有一個新對象的時候，會執行set方法，但是當我們改變數組中的某一項值的時候，或者使用數組中的push等其他的方法，或者改變數組的長度，都不會執行set方法。也就是如果我們對數組中的內部屬性值更改的話，都不會觸發set方法。因此如果我們想實現數據雙向綁定的話，我們就不能簡單地使用 obj.name[1] = newValue； 這樣的來進行賦值了。那么對于vue這樣的框架，那么一般會重寫 Array.property.push方法，并且生成一個新的數組賦值給數據，這樣數據雙向綁定就觸發了
總結
以上是生活随笔為你收集整理的详解Object.defineProperty的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ajax，jsonp，axios面试题
- 下一篇： 面趣 | 为什么要分稳定排序和非稳定排序