資訊專欄INFORMATION COLUMN
摘要：有以下中方式可以使用和對(duì)象初始化器關(guān)鍵字使用關(guān)鍵字為屬性添加一個(gè)函數(shù)，函數(shù)名即為屬性名，函數(shù)不傳參，函數(shù)傳入的參數(shù)為設(shè)置對(duì)象的新值。需被定義或修改的屬性名。目前流行的框架的響應(yīng)式系統(tǒng)就是利用設(shè)置來(lái)追蹤數(shù)據(jù)變化，從而導(dǎo)致視圖更新。
什么是getter 和 setter ？
getter: 讀取對(duì)象屬性時(shí)將被調(diào)用的函數(shù)。
setter：設(shè)置對(duì)象屬性時(shí)被調(diào)用的函數(shù)。
有以下4中方式可以使用 setter 和 getter：
1. 對(duì)象初始化器set/get 關(guān)鍵字使用get/set關(guān)鍵字為屬性添加一個(gè)函數(shù)，函數(shù)名即為屬性名，get函數(shù)不傳參，set函數(shù)傳入的參數(shù)為設(shè)置對(duì)象的新值。
例如：
var person = {
_name: "",
get name() { return this._name },
set name(newName) { this._name = newName }
}
// 測(cè)試
person.name // ""
person.name = "john" // "john", 此時(shí) person._name 也變成了 "john"
2. Object.defineProperty()
Object.defineProperty() 方法直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)已經(jīng)存在的屬性， 并返回這個(gè)對(duì)象。
語(yǔ)法:
Object.defineProperty(obj, prop, descriptor)
參數(shù):
obj:
需要定義屬性的對(duì)象。
prop:
需被定義或修改的屬性名。
descriptor:
需被定義或修改的屬性的描述符。
var person = {}
var name = ""
Object.defineProperty(person, "name", {
configurable: true,
enumerable: true,
get: function() {
return name
},
set: function(newName) {
name = newName
}
})
// 測(cè)試
person.name // undefind
person.name = "john" // "john"，此時(shí)全局的 name 也變成了 "john"
3. Object.defineProperties()
在一個(gè)對(duì)象上添加或修改一個(gè)或多個(gè)自由屬性。
用法類似Object.defineProperty()
語(yǔ)法
Object.defineProperties(obj, props)
參數(shù)
obj: 將要被添加屬性或修改屬性的對(duì)象 props: 該對(duì)象的一個(gè)或多個(gè)鍵值對(duì)定義了將要為對(duì)象添加或修改的屬性的具體配置
var obj = {a:1,b:"string"};
Object.defineProperties(obj,{
"A":{
get:function(){return this.a+1;},
set:function(val){this.a = val;}
},
"B":{
get:function(){return this.b+2;},
set:function(val){this.b = val}
}
});
//測(cè)試
obj.A; //2
obj.B; // "string2"
obj.A = 3;
obj.B = "hello";
obj.A; // 4
obj.B; // "hello2"
4. Object.create()
Object.create() 方法創(chuàng)建一個(gè)擁有指定原型和若干個(gè)指定屬性的對(duì)象。即提供新創(chuàng)建的對(duì)象的__proto__。
語(yǔ)法
Object.create(proto, [ propertiesObject ])
參數(shù)
proto:新創(chuàng)建對(duì)象的原型對(duì)象
propertiesObject：可選。新創(chuàng)建對(duì)象的可枚舉屬性對(duì)象的屬性描述符以及相應(yīng)的屬性名稱，這些屬性對(duì)應(yīng)Object.defineProperties()的第二個(gè)參數(shù)。
var o = null;
o = Object.create(Object.prototype,//指定原型為 Object.prototype
{
bar:{
get :function(){
return 10;
},
set : function (val) {
console.log("Setting `o.bar` to ",val);
}
}
}//第二個(gè)參數(shù)
);
//測(cè)試
o.bar; //10
o.bar = 12; // 控制臺(tái)打印出："Setting `o.bar` to 12"
如果你希望對(duì)象屬性值只能讀取不能被修改，那么可以不設(shè)置set函數(shù)。
目前流行的框架Vue的響應(yīng)式系統(tǒng)就是利用Object.defineProperty() 設(shè)置getter/setter來(lái)追蹤數(shù)據(jù)變化，從而導(dǎo)致視圖更新。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96291.html
摘要：回顧上回提到，計(jì)算屬性的緩存與這個(gè)類的屬性有關(guān)，那么這次我們接著來(lái)看下，屬性到底取決于什么情況來(lái)變化，從而對(duì)進(jìn)行緩存。 回顧 上回提到，computed————計(jì)算屬性的緩存與Watcher這個(gè)類的dirty屬性有關(guān)，那么這次我們接著來(lái)看下，dirty屬性到底取決于什么情況來(lái)變化，從而對(duì)computed進(jìn)行緩存。 依賴收集 切入正題之前，我們先來(lái)看一個(gè)問(wèn)題：如果一個(gè)computed的結(jié)...
摘要：如同其它虛擬機(jī)，虛擬機(jī)為字節(jié)碼提供了一個(gè)運(yùn)行時(shí)環(huán)境。編譯是一個(gè)混合模式的虛擬機(jī)，也就是說(shuō)它既可以解釋字節(jié)碼，又可以將代碼編譯為本地機(jī)器碼以更快的執(zhí)行。解決此問(wèn)題一般是在進(jìn)程啟動(dòng)后，對(duì)代碼進(jìn)行預(yù)熱以使它們被強(qiáng)制編譯。 Java HotSpot虛擬機(jī)是Oracle收購(gòu)Sun時(shí)獲得的，JVM和開(kāi)源的OpenJDK都是以此虛擬機(jī)為基礎(chǔ)發(fā)展的。如同其它虛擬機(jī)，HotSpot虛擬機(jī)為字節(jié)碼提供了一...
閱讀 2594·2021-09-22 15:41
閱讀 1518·2021-08-19 10:54
閱讀 1853·2019-08-23 15:11
閱讀 3452·2019-08-23 10:23
閱讀 1498·2019-08-22 16:28
閱讀 851·2019-08-22 15:11
閱讀 787·2019-08-22 14:53
閱讀 771·2019-08-22 13:49
