<img src="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=javascript%E6%91%98%E8%A6%81%E5%9B%BE%E6%A0%87&step_word=&hs=2&pn=36&spn=0... ...
Object.defineProperty()方法直接在對象上定義一個新屬性,或修改對象上的現有屬性,並返回該對象。
Object.defineProperty(obj, prop, descriptor)
參數
obj 定義屬性的對象。
prop 要定義或修改的屬性的名稱。
descriptor 定義或修改屬性的描述符。
返回值 傳遞給函數的對象。
註意:數據描述符和訪問器描述符,不能同時存在(value,writable 和 get,set)
get:
函數return將被用作屬性的值。
set:
該函數將僅接收參數賦值給該屬性的新值。(在屬性改變時調用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="aa"/>*<input type="text" id="cc"/>
<span id="bb">{{hello}}</span>
<script>
var obj = {};
Object.defineProperty(obj,'hello',{
enumerable: true,
configurable: true,
get: function() { return document.getElementById('aa').value; },
set:function(val){
document.getElementById('bb').innerHTML = val*obj.hello2;
}
});
Object.defineProperty(obj,'hello2',{
enumerable: true,
configurable: true,
get: function() { return document.getElementById('cc').value; },
set:function(val){
document.getElementById('bb').innerHTML = val*obj.hello;
}
});
document.getElementById('aa').onkeyup = function(){
obj.hello = this.value;
};
document.getElementById('cc').onkeyup = function(){
obj.hello2 = this.value;
};
obj.hello = "";
obj.hello2 = "";
</script>
</body>
</html>