有關getter 和 setter的使用

SunZhaopeng 發布于2019-08-23 10:23 / 3401人閱讀

摘要：有以下中方式可以使用和對象初始化器關鍵字使用關鍵字為屬性添加一個函數，函數名即為屬性名，函數不傳參，函數傳入的參數為設置對象的新值。需被定義或修改的屬性名。目前流行的框架的響應式系統就是利用設置來追蹤數據變化，從而導致視圖更新。

什么是getter 和 setter ？

getter: 讀取對象屬性時將被調用的函數。
setter：設置對象屬性時被調用的函數。

有以下4中方式可以使用 setter 和 getter：

1. 對象初始化器set/get 關鍵字

使用get/set關鍵字為屬性添加一個函數，函數名即為屬性名，get函數不傳參，set函數傳入的參數為設置對象的新值。

例如：

var person = {
    _name: "",
    get name() { return this._name },
    set name(newName) { this._name = newName }
}
 
// 測試
person.name // ""
person.name = "john" // "john", 此時 person._name 也變成了 "john"

2. Object.defineProperty()

Object.defineProperty() 方法直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性，并返回這個對象。

語法:
Object.defineProperty(obj, prop, descriptor)

參數:
obj:

需要定義屬性的對象。

prop:

需被定義或修改的屬性名。

descriptor:

需被定義或修改的屬性的描述符。

var person = {}
var name = ""
Object.defineProperty(person, "name", {
    configurable: true,
    enumerable: true,
    get: function() {
        return name
    },
    set: function(newName) {
        name = newName
    }
})
 
// 測試
person.name // undefind
person.name = "john" // "john"，此時全局的 name 也變成了 "john"

3. Object.defineProperties()

在一個對象上添加或修改一個或多個自由屬性。
用法類似Object.defineProperty()

語法

Object.defineProperties(obj, props)

參數

obj:
將要被添加屬性或修改屬性的對象      
props:     該對象的一個或多個鍵值對定義了將要為對象添加或修改的屬性的具體配置

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}
        }
    });
    
//測試
    obj.A; //2
    obj.B; // "string2"
    obj.A = 3;
    obj.B = "hello";
    obj.A; // 4
    obj.B; // "hello2"

4. Object.create()

Object.create() 方法創建一個擁有指定原型和若干個指定屬性的對象。即提供新創建的對象的__proto__。

語法
Object.create(proto, [ propertiesObject ])

參數
proto:新創建對象的原型對象
propertiesObject：可選。新創建對象的可枚舉屬性對象的屬性描述符以及相應的屬性名稱，這些屬性對應Object.defineProperties()的第二個參數。

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);
                    }
                }
            }//第二個參數
        );

//測試
    o.bar; //10
    o.bar = 12; // 控制臺打印出："Setting `o.bar` to  12"

如果你希望對象屬性值只能讀取不能被修改，那么可以不設置set函數。

目前流行的框架Vue的響應式系統就是利用Object.defineProperty() 設置getter/setter來追蹤數據變化，從而導致視圖更新。

GPU云服務器云服務器 getter和setter方法 webrtc和系統有關系 webrtc卡頓界面模糊和服務器有關嗎服務器的使用和維護

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

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

根據調試工具看Vue源碼之computed（二）

摘要：回顧上回提到，計算屬性的緩存與這個類的屬性有關，那么這次我們接著來看下，屬性到底取決于什么情況來變化，從而對進行緩存。回顧上回提到，computed————計算屬性的緩存與Watcher這個類的dirty屬性有關，那么這次我們接著來看下，dirty屬性到底取決于什么情況來變化，從而對computed進行緩存。依賴收集切入正題之前，我們先來看一個問題：如果一個computed的結...

U2FsdGVkX1x 2019-08-23 15:58 評論0 收藏0
Java HotSpot VM中的JIT編譯

摘要：如同其它虛擬機，虛擬機為字節碼提供了一個運行時環境。編譯是一個混合模式的虛擬機，也就是說它既可以解釋字節碼，又可以將代碼編譯為本地機器碼以更快的執行。解決此問題一般是在進程啟動后，對代碼進行預熱以使它們被強制編譯。 Java HotSpot虛擬機是Oracle收購Sun時獲得的，JVM和開源的OpenJDK都是以此虛擬機為基礎發展的。如同其它虛擬機，HotSpot虛擬機為字節碼提供了一...

caozhijian 2019-08-14 11:42 評論0 收藏0
Lombok使用

摘要：為方法或構造函數的參數生成檢查語句，相當于生成的檢查語句會插入到方法的最前端，如果是構造函數，則在或調用之后插入檢查。 Lombok簡介 Lombok是一個可以通過簡單的注解形式來幫助我們簡化消除一些必須有但顯得很臃腫的Java代碼的工具，通過使用對應的注解，可以在編譯源碼的時候生成對應的方法。 ...

張金寶 2019-08-16 10:58 評論0 收藏0