溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
defineProperty
Object提供的方法，用于給對象添加自定義屬性具體用法如下：
const obj = { _value: 1 };
Object.defineProperty(obj, 'value', {
get: function() {
console.log('get方法執行');
return this._value;
},
set: function(a) {
console.log('set方法執行');
this._value = a;
}
})
obj.value = 3;
console.log(obj.value);
console.log(obj._value);
在node中執行結果如下：
下面來分析一下代碼
首先定一個對象，并對對象添加一個自定義屬性value,同時添加了getter,setter兩個函數用來分別控制value屬性的修改和獲取，
當執行obj.value = 3;時，會自動調屬性的setter方法，將value的修改同步到_value屬性上,當執行obj.value語句獲取屬性值時，會自動調用getter方法獲取方法的返回值；
總結 （參考MDN）
該方法接收三個參數
obj:要添加屬性的對象
prop: 要定義的屬性
descriptor：要定義或者修改的屬性描述符
其中描述符包含以下幾種
1.configurable：布爾值，控制屬性是否能改變(除了value,writable)及刪除
2.enumerable: 布爾值，控制屬性是否可枚舉，即通過for in循環或者Object.keys訪問
3.value：屬性值，可以時任何有效JavaScript值
4.writable 布爾值，屬性可否通過賦值修改
5.get:屬性getter函數，執行時傳入this,this值取決于調用者
6.set:屬性setter函數，賦值時執行，并傳入this
雙向綁定
由此可以設計一下數據雙向綁定的簡單實現：
在數據對象內定義屬性，通過對dom綁定事件監聽dom內值的變化，并賦值給數據對象，數據對象的改動會調用自身的setter方法，在方法內在動態修改dom內容。
代碼如下：
<!-- 簡單數據雙向綁定實現 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root">
<button id='btn'>請求數據</button>
</div>
</body>
<script>
const root = document.getElementById('root');
const btn = document.getElementById('btn');
const input = document.createElement('input');
const model = document.createElement('p');
const dataModel = {
_value:0,
}
Object.defineProperty(dataModel, 'value', {
configurable: true,
set:function(value){
this._value = value;
input.value = value;
model.innerHTML = `<span>數據模型：</sapn> ${value}`;
},
get:function(){
return this._value;
}
})
btn.addEventListener('click', () => {
const range = Math.floor(Math.random(0, 1) * 100);
dataModel.value = range;
})
input.addEventListener('input',(ev) => {
dataModel.value = ev.target.value;
})
const initPage = () => {
dataModel.value = 100;
}
initPage();
root.append(input);
root.append(model);
</script>
</html>
描述有點亂，看實現代碼更清晰一點，有問題歡迎指正
到此這篇關于javascript用defineProperty實現簡單的雙向綁定方法的文章就介紹到這了,更多相關javascript defineProperty雙向綁定內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
