object.defineproperty用法(get,set)
阿新 • • 發佈:2018-11-11
起始
Get:指讀取屬性時呼叫的函式。
Set:指寫入屬性時呼叫的函式。
困惑
因為一開始不是很懂這個方法,所以一直糾結於get
方法:我設定了新的值,我怎麼獲取這個新的值?
let data1 = { name:'小明', age:18 } Object.defineProperty(data1,'age',{ set:function(newAge){ console.log(this.name+'現在'+newAge+'歲') }, get:function(){ return 18; } }) //賦值 data1.age = 18; data1.age = 19; console.log(data1.age)
執行
在這裡看到,我們獲取data.age1
的時候只能是得到18,因為本質上data1={ name: '小明', age: [Getter/Setter] }
,也就是說我在使用data1.age
方法時候是在使用get
方法,而get
方法返回值一直是18,所以我一直獲取不了最新的值。不過這裡也是鑽了一下牛角尖,然後通過別的思路(賦值)想到了一種實現方法,並且網上查閱資料的時候說這也是高三上面的例子。
轉換思想
let data = { name:'小明', _age:18 } Object.defineProperty(data,'age',{ set:function(newAge){ this._age = newAge; console.log(this.name+'現在'+newAge+'歲') }, get:function(){ return this._age } }) //賦值 // data.age = 18;
看到這裡大家就應該明白了,我是通過data
中新增一個屬性_age
來變相的達到資料同步。
function setAge(){
data.age = parseFloat(data.age) +1;
if(parseFloat(data.age)>20){
return false;
}
setTimeout(() => {
setAge()
}, 1000);
}
setAge()