JavaScript Getters and Setters

warnerwu 發布于2019-08-20 17:50 / 1466人閱讀

For the most part, in JavaScript, what you see is what you get. A value’s a value; there are no tricks. Sometimes however, you want a value that’s based on some other values: someone’s full name, for example, is a concatenation of their first and last names. If you have a person object, and you want the users of that object to be able to set the full, first or last name, and see that change immediately reflected in the other values, you’d conventionally build it with functions:

person.setLastName("Smith");
person.setFirstName("Jimmy");
person.getFullName(); // Jimmy Smith

But this is ugly, and requires the users of your object to care that the properties are related; in a more complex example, that might not be as obvious as with names. Luckily, there’s a better way, added in ECMAScript 5.

Meet getters and setters.

How

Let’s make that person object. We want to be able to set the first name, last name or full name, and have it update the other two automagically.

var person = {
    firstName: "Jimmy",
    lastName: "Smith",
    get fullName() {
        return this.firstName + " " + this.lastName;
    },
    set fullName (name) {
        var words = name.toString().split(" ");
        this.firstName = words[0] || "";
        this.lastName = words[1] || "";
    }
}

person.fullName = "Jack Franklin";
console.log(person.firstName); // Jack
console.log(person.lastName) // Franklin

So what’s going on here?

The get and set keywords are important. Following them is the property they relate to (fullName) and a function body that defines the behaviour when the property is accessed (name = person.fullName) or modified (person.fullName = "Some Name").

These two keywords define accessor functions: a getter and a setter for the fullName property. When the property is accessed, the return value from the getter is used. When a value is set, the setter is called and passed the value that was set. It’s up to you what you do with that value, but what is returned from the setter is the value that was passed in – so you don’t need to return anything.

The official way: Object.defineProperty

Along with the inline method of declaring getters and setters, it can also be done more explicitly via Object.defineProperty (MDN Documentation). This method takes three arguments. The first is the object to add the property to, the second is the name of the property, and the third is an object that describes the property (known as the property’s descriptor). Here’s an example that replicates the above example:

var person = {
    firstName: "Jimmy",
    lastName: "Smith"
};

Object.defineProperty(person, "fullName", {
    get: function() {
        return firstName + " " + lastName;
    },
    set: function(name) {
        var words = name.split(" ");
        this.firstName = words[0] || "";
        this.lastName = words[1] || "";
    }
});

The advantage here isn’t immediately apparent. Other than being able to add properties after creating the initial object, is there a real benefit?

When you define a property this way, you can do much more than just define a setter or getter. You may also pass following keys:

configurable (false by default): if this is true, the property’s configuration will be modifiable in future.

enumerable (false by default): if true, the property will appear when looping over the object (for (var key in obj)).

We can also define properties that don’t have explicit getters or setters:

Object.defineProperty(person, "age", {
    value: 42
});

Now, person.age = 99; will have the desired effect.

Overuse

Remember: just because a feature exists, it doesn’t need to be used all the time. Getters and Setters have their use cases, but don’t go over the top, or you’ll most likely end up with a design that’s confusing for those interacting with your objects. Used carefully, they’re very powerful. But with great power comes great responsibility.

Browser support?

IE9 and above have full support for Object.defineProperty, along with Safari 5+, Firefox 4+, Chrome 5+ and Opera 12+. If you’re working with Node.js, there’s full support. Don’t you just love Node?!

This article was co-authored with Tom Ashworth. Thanks to Tom for all his help putting this together.

原文鏈接

https://javascriptplayground....

GPU云服務器云服務器 Setters Getters And between and

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

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

Java反射-Getters and Setters

摘要：使用反射可以在運行時檢視類的方法并調用它們。你不能直接得到和，必須掃描類所有的方法并依次檢查是否或。首先，我們需要建立和方法的特征方法名稱以開始，需要參數，并且返回一個值。查詢一個類的和方法的示例代碼如下使用反射可以在運行時檢視類的方法并調用它們。這被用來發現類的getters和setters。你不能直接得到getters和setters，必須掃描類所有的方法并依次檢查是否gette...

wanglu1209 2019-08-19 11:17 評論0 收藏0
PHP設計模式(三)：封裝

摘要：原文地址設計模式三封裝面向對象編程中，一切都是對象，對一個對象的封裝，也成了面向對象編程中必不可少的部分。封裝方法和別的程序設計語言一樣，也只是三種封裝概念，，。直接訪問和修改破壞了類的封裝性。原文地址：PHP設計模式(三)：封裝 Introduction 面向對象編程中，一切都是對象，對一個對象的封裝，也成了面向對象編程中必不可少的部分。和C/C++，Java，Python等語言一...

dongxiawu 2019-06-27 12:15 評論0 收藏0
在eclipse中自動為變量生成get和set函數

摘要：為成員變量生成和函數將光標定位到該變量上單擊右鍵，選擇也可以從菜單中選擇在彈出的對話框中設置插入的位置，訪問屬性等為成員變量生成get和set函數：將光標定位到該變量上 showImg(https://segmentfault.com/img/bVRKJP?w=303&h=115); 單擊右鍵，選擇Source->Generate Getters and Setters......

zhangke3016 2019-08-15 11:01 評論0 收藏0
JavaScript 風格指南（筆記）

摘要：用且只用一個完成這一需求。執行時可以增加規則對要變量的合法性進行判斷。繼承該類時可以重載默認行為。讓對象擁有私有成員。理想情況下，應將調用其他函數的函數寫在被調用函數的上方。避免位置標記避免在源文件中寫入法律評論參考變量使用有意義、可讀性好的變量使用 ES6 的 const 聲明常量對功能類似的變量名采用統一的命名風格使用易于檢索名稱舉例 // 反例 for (var ...

wind5o 2019-08-23 13:42 評論0 收藏0
Java中的JSON數據綁定框架Jackson使用介紹

摘要：系列文章地址文檔可以輕松的將對象轉換成對象和文檔，同樣也可以將轉換成對象。在項目中如果要引入，可以直接利用或者引入注意，項目已經自動依賴了與，不需要額外重復引入。 Github 系列文章地址 Jackson jackson-databind文檔 Jackson可以輕松的將Java對象轉換成json對象和xml文檔，同樣也可以將json、xml轉換成Java對象。在項目中如果要引入Jac...

mengera88 2019-08-14 14:06 評論0 收藏0