JavaScript Object Properties —— Enumeration, Types of Properties

最新推荐文章于 2024-08-31 22:44:59 发布

原创最新推荐文章于 2024-08-31 22:44:59 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文探讨了JavaScript中对象属性的枚举方式及其特性，并介绍了数据属性与访问器属性的区别及应用场景。

原创转载请注明出处：http://agilestyle.iteye.com/blog/2341899

Enumeration

All object properties are enumerable by default, which means that they will appear in a for-in loop or be retrieved by Object.keys().

var listProperties1 = function (object) {
    var property;

    for (property in object) {
        console.log("Name: " + property);
        console.log("Value: " + object[property]);
    }
}

var listProperties2 = function (object) {
    var properties = Object.keys(object);

    var i, len;
    for (i = 0, len = properties.length; i < len; i++) {
        console.log("Name: " + properties[i]);
        console.log("Value: " + object[properties[i]]);
    }
}

var person1 = {
    name: "Nicholas"
};

listProperties1(person1);
listProperties2(person1);

console.log("name" in person1);                         // true
console.log(person1.propertyIsEnumerable("name"));      // true
var properties = Object.keys(person1);
console.log("length" in properties);                    // true
console.log(properties.propertyIsEnumerable("length")); // false

Note:

Keep in mind that not all properties are enumerable. In fact, most of the native methods on objects have their [[Enumerable]] attribute set to false. You can check whether a property is enumerable by using the propertyIsEnumerable() method, which is present on every object.

Types of Properties

There are two types of properties: data properties and accessor properties.

Data properties are placeholders for values, and you can read from and write to them. When a data property holds a function value, the property is considered a method of the object.

Unlike data properties, accessor properties don’t store values on their own; they use a combination of getters and setters to perform specific actions. You can create both data properties and accessor properties directly using object literal notation.

var person1 = {
    _name: "Kobe",

    get name() {
        console.log("Reading name");
        return this._name;
    },
    set name(value) {
        console.log("Setting name to %s", value);
        this._name = value;
    }
};

console.log(person1.name);  // "Reading name" then outputs "Kobe"
person1.name = "Bryant";
console.log(person1.name);  // "Setting name to Bryant" then outputs "Bryant"

This example defines an accessor property called name. There is a data property called _name that contains the actual value for the property. (The leading underscore is a common convention to indicate that the property is considered to be private, though in reality it is still public). The syntax used to define the getter and setter for name looks a lot like a function but without the function keyword. The special keywords get and set are used before the accessor property name, followed by parentheses and a function body. Getters are expected to return a value, while setters receive the value being assigned to the property as an argument.

Even though this example uses _name to store the property data, you could just as easily store the data in a variable or even in another object. This example simply adds logging to the behavior of the property; there's usually no reason to use accessor properties if you are only storing the data in another property - just use the property itself. Accessor properties are most useful when you want the assignment of a value to trigger some sort of behavior, or when reading a value requires the calculation of the desired return value.