1. 程式人生 > >object.defineproperty用法(get,set)

object.defineproperty用法(get,set)

起始

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()

最終

最終效果