向javascript对象添加属性的不同方法

Question

The following 3 methods i had come across by which properties can be added to an object.

> collection = {key0: 'value0'}
{ key0: 'value0' }

> collection.key1 = 'value1';
'value1'

> collection['key2'] = 'value2';
'value2'

> collection
{ key0: 'value0',
  key1: 'value1',
  key2: 'value2' }

Are there other methods exist by which properties can be added to the object.

Does all the 3 methods do the exact same job ?

Answer 1

There is an important difference here: the first example creates a new object (this is called an "object literal"), the other two change an already existing object.

The second and third examples change the collection object in the same way, the difference lies in the inability to use a variable property name in the dot notation:

// Let's say we have an object
var collection = { key0 : "value0" };

// Let's say for some reason we want to use a variable as a property name
var keyName = "key1";

// This won't assign "someValue" to the property "key1" as you would expect
// instead it will assign it to the property "keyName" (the string, not the variable)
collection.keyName = "someValue"; // OOPS

// With bracket notation you can use a variable (or any expression) as a property name
collection[keyName] = "value1"; // Sweet

Answer 2

The first statement defines a new object with a single property named key0 .

The second statement assigns a value to the object's property named key1 . Since the object doesn't have its own property named key1 , the property is created.

The third statement is identical in effect to the second statement. The main reasons to use bracket notation instead of dot notation are:

• properties with special characters, eg, collection["foo-bar"] refers to a property called foo-bar , but collection.foo-bar performs a subtraction operation on collection.foo and bar .

• variable property names, eg, you can do var propName = "key0"; collection[propName] = ... var propName = "key0"; collection[propName] = ...

The only other way to define properties is with Object.defineProperty (and the multiple variant Object.defineProperties ). This allows you to define properties that behave in special ways.

Object.defineProperty(collection, "key3", {
    enumerable: false,    // property will not show up in for-in loops
    configurable: false,  // property cannot be changed
    set: function(val) {
        alert("we tried to set key3 to " + val);
    },
    get: function() {
        alert("this code runs when we get collection.key3");
        return "value3";
    }
});

collection.key3 = 6;  // alerts "we tried to set key3 to 6"
collection.key3;      // alerts "this code runs when we get collection.key3"
                      // and returns the string "value3"