摘要:存取器屬性的介紹對(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è)方法就是getter和setter。有g(shù)etter和setter定義的屬性稱做“存取器屬性(accessor property)”。普通的屬性稱做“數(shù)據(jù)屬性(data proper同樣)”,數(shù)據(jù)屬性只有一個(gè)簡(jiǎn)單的值。
當(dāng)程序查詢存取器屬性的值時(shí),JavaScript調(diào)用getter方法(無參數(shù))。這個(gè)方法的返回值就是屬性存取表達(dá)式的值。當(dāng)程序設(shè)置一個(gè)存取器屬性的值是,JavaScript調(diào)用setter方法,講賦值表達(dá)式右側(cè)的值當(dāng)做參數(shù)傳入setter。從某種意義上講,這個(gè)方法負(fù)責(zé)“設(shè)置”屬性值。可以忽略setter方法的返回值。
和數(shù)據(jù)屬性不同,存取器屬性不具有可寫性(writable attribute)。如果屬性同時(shí)具有g(shù)etter和setter方法,那么它是一個(gè)讀/寫屬性。如果它只有g(shù)etter方法,那么它是一個(gè)只讀屬性。如果它只有setter方法,那么它是一個(gè)只寫屬性。讀取只寫屬性總是返回undefined。
存取器屬性定義為一個(gè)或兩個(gè)和屬性同名的函數(shù),這個(gè)函數(shù)定義沒有使用function關(guān)鍵字,而是使用get和(或)set。注意這里沒有使用冒號(hào)將屬性名和函數(shù)體分隔開,但在函數(shù)體的結(jié)束和下一個(gè)方法或數(shù)據(jù)屬性之間有逗號(hào)分隔。例如,下面這個(gè)表示笛卡爾點(diǎn)坐標(biāo)的對(duì)象,它還有兩個(gè)等價(jià)的存取器屬性用來表示點(diǎn)的極坐標(biāo):
var p = { x: 1.0, y: 1.0, get r() { return Math.sqrt(this.x*this.x + this.y*this.y)}, set r(newvalue) { var oldvalue = Math.sqrt(this.x*this.x + this.y*this.y); var radio = newvalue/oldvalue; this.x *= radio; this.y *= radio; }, get theta() { return Math.atan2(this.y, this.x); } }
在這段代碼中,在函數(shù)體內(nèi)的this指向表示這個(gè)點(diǎn)的對(duì)象。和數(shù)據(jù)屬性一樣,存取器屬性是可以繼承的。存取器屬性可以做什么
在segmentfault一個(gè)問答看到的兩個(gè)例子:
在某個(gè)屬性被設(shè)置時(shí)打印日志
set: function(pw) { this.pw = pw; console. log("密碼被修改了"); }
在某個(gè)屬性被設(shè)置時(shí)更新其他屬性
set: function(a) { this.a = a; this.b = a * 100; }
Vue的響應(yīng)式原理也是通過setter,getter實(shí)現(xiàn)的:Vue官網(wǎng)-響應(yīng)式原理
我的理解就是:當(dāng)某個(gè)屬性被更新,即當(dāng)Vue實(shí)例中的data對(duì)象的某個(gè)屬性被設(shè)置,通過setter更新其他屬性,從而實(shí)現(xiàn)雙向數(shù)據(jù)綁定。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/89241.html
摘要:對(duì)象的屬性是由名字值和一組特性可寫可枚舉可配置等構(gòu)成的。在中,屬性值可以用一個(gè)或兩個(gè)方法代替,這兩個(gè)方法就是和。上面的代碼中,屬性稱為數(shù)據(jù)屬性,它只有一個(gè)簡(jiǎn)單的值像屬性這種用和方法定義的屬性稱為存取器屬性。 最近在重新看vue2.x的文檔,注意到computed中的setter和getter,以前就知道他倆是干嘛的,但是不知道原理,然后決定查看一些資料,搞明白setter和getter...
摘要:關(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ì)受到原型鏈上的同名屬性...
閱讀 2025·2023-04-26 00:16
閱讀 3475·2021-11-15 11:38
閱讀 3168·2019-08-30 12:50
閱讀 3178·2019-08-29 13:59
閱讀 750·2019-08-29 13:54
閱讀 2496·2019-08-29 13:42
閱讀 3305·2019-08-26 11:45
閱讀 2187·2019-08-26 11:36