JavaScript對象的屬性getter和setter

Olivia 發布于2019-08-21 17:12 / 521人閱讀

摘要：存取器屬性的介紹對象的屬性是由名字值和一組特性組成。在中，屬性值可以用一個或兩個方法代替，這兩個方法就是和。例如，下面這個表示笛卡爾點坐標的對象，它還有兩個等價的存取器屬性用來表示點的極坐標在這段代碼中，在函數體內的指向表示這個點的對象。

存取器屬性的介紹

JavaScript對象的屬性是由名字、值和一組特性組成。在ECMAScript中，屬性值可以用一個或兩個方法代替，這兩個方法就是getter和setter。有getter和setter定義的屬性稱做“存取器屬性（accessor property）”。普通的屬性稱做“數據屬性（data proper同樣）”，數據屬性只有一個簡單的值。
當程序查詢存取器屬性的值時，JavaScript調用getter方法（無參數）。這個方法的返回值就是屬性存取表達式的值。當程序設置一個存取器屬性的值是，JavaScript調用setter方法，講賦值表達式右側的值當做參數傳入setter。從某種意義上講，這個方法負責“設置”屬性值?？梢院雎詓etter方法的返回值。
和數據屬性不同，存取器屬性不具有可寫性（writable attribute）。如果屬性同時具有getter和setter方法，那么它是一個讀/寫屬性。如果它只有getter方法，那么它是一個只讀屬性。如果它只有setter方法，那么它是一個只寫屬性。讀取只寫屬性總是返回undefined。
存取器屬性定義為一個或兩個和屬性同名的函數，這個函數定義沒有使用function關鍵字，而是使用get和（或）set。注意這里沒有使用冒號將屬性名和函數體分隔開，但在函數體的結束和下一個方法或數據屬性之間有逗號分隔。例如，下面這個表示笛卡爾點坐標的對象，它還有兩個等價的存取器屬性用來表示點的極坐標：

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); }
}

在這段代碼中，在函數體內的this指向表示這個點的對象。和數據屬性一樣，存取器屬性是可以繼承的。

存取器屬性可以做什么

在segmentfault一個問答看到的兩個例子：

在某個屬性被設置時打印日志

set: function(pw) {
    this.pw = pw;
    console. log("密碼被修改了");
}

在某個屬性被設置時更新其他屬性

set: function(a) {
    this.a = a;
    this.b = a * 100;
}

Vue的響應式原理也是通過setter，getter實現的：Vue官網-響應式原理

我的理解就是：當某個屬性被更新，即當Vue實例中的data對象的某個屬性被設置，通過setter更新其他屬性，從而實現雙向數據綁定。

云服務器 GPU云服務器 getter和setter方法匹配對象的屬性和函數對象的屬性 javascript類和對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89241.html

JavaScript對象中屬性的getter和setter方法

摘要：對象的屬性是由名字值和一組特性可寫可枚舉可配置等構成的。在中，屬性值可以用一個或兩個方法代替，這兩個方法就是和。上面的代碼中，屬性稱為數據屬性，它只有一個簡單的值像屬性這種用和方法定義的屬性稱為存取器屬性。最近在重新看vue2.x的文檔，注意到computed中的setter和getter,以前就知道他倆是干嘛的，但是不知道原理，然后決定查看一些資料，搞明白setter和getter...

neu 2019-08-21 17:19 評論0 收藏0
javascript基礎-Vue數據綁定前奏對象屬性

摘要：關于有人說我用刪除這個屬性不就好了之后打印發現它還是一只哈士奇。如下的解釋如下操作符會從某個對象上移除指定屬性。 javascript-Object-Property ? javascript-對象的屬性的延伸學習 showImg(https://segmentfault.com/img/bVNH2S?w=640&h=640); 前言在學習vue數據綁定的較底層原理時，被setter...

zebrayoung 2019-08-20 16:33 評論0 收藏0
JavaScript || 對象

摘要：通過對返回字符串切片第位到倒數第位即可獲得對象的類型。測試對象是的深拷貝是的子集，不能表示中所有值。序列化結果是，對象序列化結果是日期字符串不能表示函數對象和只能序列化對象自有的可枚舉屬性。對象對象是JavaScript的基本數據類型：屬性的無序集合。每個屬性key: value和屬性描述符descripter組成。屬性名key：字符串或合法的變量標識符；屬性值value：...

lavor 2019-08-20 14:39 評論0 收藏0
《JS高程》—— 數據屬性與訪問器屬性

摘要：中有兩種屬性數據屬性和訪問器屬性數據屬性數據屬性包含一個數據值的位置。表示能否通過刪除屬性從而重新定義屬性可配置的能否修改屬性的特性能否把屬性修改為訪問器屬性。以上代碼在對外上定義了兩個數據屬性和和一個訪問器屬性。屬性類型： ECMA-262第5版在定義只有內部才用的特性（attribute）時，描述了屬性（property）的各種特征。ECMA-262定義這些特性是為了實現Java...

yearsj 2019-08-20 17:14 評論0 收藏0
【js細節剖析】通過"="操作符為對象添加新屬性時，結果會受到原型鏈上的同名屬性

摘要：在使用的過程中，通過操作符為對象添加新屬性是很常見的操作。但是，這個操作的結果實際上會受到原型鏈上的同名屬性影響。通過它，可以做到操作符做不到的事情，比如為對象設置一個新屬性，即使它的原型鏈上已經有一個的同名屬性。在使用JavaScript的過程中，通過=操作符為對象添加新屬性是很常見的操作：obj.newProp = value;。但是，這個操作的結果實際上會受到原型鏈上的同名屬性...

wemallshop 2019-08-23 12:38 評論0 收藏0