資訊專欄INFORMATION COLUMN
摘要：對(duì)象的屬性是由名字值和一組特性可寫可枚舉可配置等構(gòu)成的。在中，屬性值可以用一個(gè)或兩個(gè)方法代替，這兩個(gè)方法就是和。上面的代碼中，屬性稱為數(shù)據(jù)屬性，它只有一個(gè)簡(jiǎn)單的值像屬性這種用和方法定義的屬性稱為存取器屬性。
最近在重新看vue2.x的文檔，注意到computed中的setter和getter,以前就知道他倆是干嘛的，但是不知道原理，然后決定查看一些資料，搞明白setter和getter具體是什么實(shí)現(xiàn)原理。
JavaScript對(duì)象的屬性是由名字、值和一組特性（可寫、可枚舉、可配置等）構(gòu)成的。在ECMAScript 5中，屬性值可以用一個(gè)或兩個(gè)方法代替，這兩個(gè)方法就是getter和setter。
var obj = {
a: 1,
get b(){
return 2;
}
};
console.log(obj.a);//1
console.log(obj.b);//2
上面的代碼中，屬性a稱為“數(shù)據(jù)屬性”，它只有一個(gè)簡(jiǎn)單的值；像屬性b這種用getter和setter方法定義的屬性稱為“存取器屬性”。
存取器屬性定義為一個(gè)或兩個(gè)與屬性同名的函數(shù)，這個(gè)函數(shù)定義沒有使用function關(guān)鍵字，而是使用get或set，也沒有使用冒號(hào)將屬性名和函數(shù)體分開，但函數(shù)體的結(jié)束和下一個(gè)方法之間有逗號(hào)隔開。
當(dāng)程序查詢存取器的屬性值時(shí)，JavaScript代用getter方法（無參數(shù)），這個(gè)方法的返回值就是該屬性存取表達(dá)式的值。當(dāng)程序設(shè)置一個(gè)存取器屬性值時(shí)，JavaScript調(diào)用setter方法，將賦值表達(dá)式右側(cè)的值當(dāng)作參數(shù)傳入setter。從某種意義上來說，這個(gè)方法負(fù)責(zé)設(shè)置屬性值，可以忽略該方法的返回值。
當(dāng)一個(gè)屬性被定義為存取器屬性時(shí)，JavaScript會(huì)忽略它的value和writable特性，取而代之的是set和get（還有configurable和enumerable）特性。
var obj = {
get a(){
return 1;
}
};
obj.a = 2;
console.log(obj.a);//1
如上面代碼所示，由于我們只定義了屬性a的getter，所以對(duì)a進(jìn)行設(shè)置（即賦值）時(shí)set會(huì)忽略賦值操作，不會(huì)拋出錯(cuò)誤。
var obj = {
get a(){
return this._a_;
},
set a(val){
this._a_ = val;
}
};
obj.a = 1;
console.log(obj.a);//1
正確的寫法如上所示。getter和setter方法中的this都指向myObj對(duì)象。這里我們把賦值操作中的3存儲(chǔ)到另一個(gè)中間變量 a 中。名稱 a 只是一種慣例，并沒有其它任何特殊行為，它只是一個(gè)普通的屬性。把它換成其它任意合法名稱如 b 都行，甚至可以在外面將它打印出來。
var obj = {
get a(){
return this._b_;
},
set a(val){
this._b_ = val;
}
};
obj.a = 1;
console.log(obj.a);//1
console.log(obj._b_);//1
另外，存取器屬性也是可以繼承的：
var obj = {
get a(){
return this._b_;
},
set a(val){
this._b_ = val;
}
};
obj.a = 1;
var _obj = Object.create(obj);
console.log(_obj.a);//1
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89382.html
摘要：存取器屬性的介紹對(duì)象的屬性是由名字值和一組特性組成。在中，屬性值可以用一個(gè)或兩個(gè)方法代替，這兩個(gè)方法就是和。例如，下面這個(gè)表示笛卡爾點(diǎn)坐標(biāo)的對(duì)象，它還有兩個(gè)等價(jià)的存取器屬性用來表示點(diǎn)的極坐標(biāo)在這段代碼中，在函數(shù)體內(nèi)的指向表示這個(gè)點(diǎn)的對(duì)象。 存取器屬性的介紹 JavaScript對(duì)象的屬性是由名字、值和一組特性組成。在ECMAScript中，屬性值可以用一個(gè)或兩個(gè)方法代替，這兩個(gè)方法就是...
摘要：關(guān)于有人說我用刪除這個(gè)屬性不就好了之后打印發(fā)現(xiàn)它還是一只哈士奇。如下的解釋如下操作符會(huì)從某個(gè)對(duì)象上移除指定屬性。 javascript-Object-Property ? javascript-對(duì)象的屬性的延伸學(xué)習(xí) showImg(https://segmentfault.com/img/bVNH2S?w=640&h=640); 前言 在學(xué)習(xí)vue數(shù)據(jù)綁定的較底層原理時(shí)，被setter...
摘要：通過對(duì)返回字符串切片第位到倒數(shù)第位即可獲得對(duì)象的類型。測(cè)試對(duì)象是的深拷貝是的子集，不能表示中所有值。序列化結(jié)果是，對(duì)象序列化結(jié)果是日期字符串不能表示函數(shù)對(duì)象和只能序列化對(duì)象自有的可枚舉屬性。 對(duì)象 對(duì)象是JavaScript的基本數(shù)據(jù)類型：屬性的無序集合。每個(gè)屬性key: value和屬性描述符descripter組成。 屬性名key：字符串或合法的變量標(biāo)識(shí)符； 屬性值value：...
摘要：中有兩種屬性數(shù)據(jù)屬性和訪問器屬性數(shù)據(jù)屬性數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置。表示能否通過刪除屬性從而重新定義屬性可配置的能否修改屬性的特性能否把屬性修改為訪問器屬性。以上代碼在對(duì)外上定義了兩個(gè)數(shù)據(jù)屬性和和一個(gè)訪問器屬性。 屬性類型： ECMA-262第5版在定義只有內(nèi)部才用的特性（attribute）時(shí)，描述了屬性（property）的各種特征。ECMA-262定義這些特性是為了實(shí)現(xiàn)Java...
摘要：在使用的過程中，通過操作符為對(duì)象添加新屬性是很常見的操作。但是，這個(gè)操作的結(jié)果實(shí)際上會(huì)受到原型鏈上的同名屬性影響。通過它，可以做到操作符做不到的事情，比如為對(duì)象設(shè)置一個(gè)新屬性，即使它的原型鏈上已經(jīng)有一個(gè)的同名屬性。 在使用JavaScript的過程中，通過=操作符為對(duì)象添加新屬性是很常見的操作：obj.newProp = value;。但是，這個(gè)操作的結(jié)果實(shí)際上會(huì)受到原型鏈上的同名屬性...
閱讀 3470·2021-11-17 17:00
閱讀 3837·2021-08-09 13:46
閱讀 2879·2019-08-30 15:54
閱讀 644·2019-08-30 13:54
閱讀 2957·2019-08-29 17:13
閱讀 3234·2019-08-29 14:00
閱讀 2987·2019-08-29 11:11
閱讀 1401·2019-08-26 10:15
