當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

详解Object.defineProperty

發布時間：2024/9/27 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了详解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方法里設置當前的屬性值.會報棧溢出.原因是會造成死循環。

// 例1 用對象中不存在的屬性，借助get和set實現獲取和設置對象中存在的屬性let obj = { name_: '小紅' };Object.defineProperty(obj, 'name', {get() {console.log("get被攔截")return this.name_},set(newValue) {console.log("set被攔截")this.name_ = newValue}})obj.name = "小明"console.log(obj.name) //小明console.log(obj) //{name_:'小明'}

簡單實現數據雙向綁定

<!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面试题
下一篇： 2017房公积金缴费基数是多少？