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

neu 發布于2019-08-21 17:19 / 3269人閱讀

摘要：對象的屬性是由名字值和一組特性可寫可枚舉可配置等構成的。在中，屬性值可以用一個或兩個方法代替，這兩個方法就是和。上面的代碼中，屬性稱為數據屬性，它只有一個簡單的值像屬性這種用和方法定義的屬性稱為存取器屬性。

最近在重新看vue2.x的文檔，注意到computed中的setter和getter,以前就知道他倆是干嘛的，但是不知道原理，然后決定查看一些資料，搞明白setter和getter具體是什么實現原理。
JavaScript對象的屬性是由名字、值和一組特性（可寫、可枚舉、可配置等）構成的。在ECMAScript 5中，屬性值可以用一個或兩個方法代替，這兩個方法就是getter和setter。

var obj = {
    a: 1,
    get b(){
        return 2;
    }   
};

console.log(obj.a);//1
console.log(obj.b);//2

上面的代碼中，屬性a稱為“數據屬性”，它只有一個簡單的值；像屬性b這種用getter和setter方法定義的屬性稱為“存取器屬性”。

存取器屬性定義為一個或兩個與屬性同名的函數，這個函數定義沒有使用function關鍵字，而是使用get或set，也沒有使用冒號將屬性名和函數體分開，但函數體的結束和下一個方法之間有逗號隔開。

當程序查詢存取器的屬性值時，JavaScript代用getter方法（無參數），這個方法的返回值就是該屬性存取表達式的值。當程序設置一個存取器屬性值時，JavaScript調用setter方法，將賦值表達式右側的值當作參數傳入setter。從某種意義上來說，這個方法負責設置屬性值，可以忽略該方法的返回值。

當一個屬性被定義為存取器屬性時，JavaScript會忽略它的value和writable特性，取而代之的是set和get（還有configurable和enumerable）特性。

var obj = {
    get a(){
        return 1;
    }   
};

obj.a = 2;

console.log(obj.a);//1

如上面代碼所示，由于我們只定義了屬性a的getter，所以對a進行設置（即賦值）時set會忽略賦值操作，不會拋出錯誤。

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對象。這里我們把賦值操作中的3存儲到另一個中間變量 a 中。名稱 a 只是一種慣例，并沒有其它任何特殊行為，它只是一個普通的屬性。把它換成其它任意合法名稱如 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

云服務器 GPU云服務器 getter和setter方法 js包裝對象中的屬性匹配對象的屬性和函數 js，對象中增加數據的方法

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

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

JavaScript對象的屬性getter和setter

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

Olivia 2019-08-21 17:12 評論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