javascript中的对象文字如何工作？

Question

Im having some trouble understanding the syntax of object literals in javascript when considering the following code sample (from Mozilla's developer site):

var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };

console.log(car.manyCars.b); // Jeep
console.log(car[7]); // Mazda

My current understanding of javascript object literals is this: If you give a key, value pair and the key is of a data type, it works something like a python dictionary, making car[key] return the value you set to the key. If you give a key as just text, it defines a variable in 'car' set to the value you associated with the key. However, in the above, "b" is a string, but car.manyCars.b can be called as if it were a variable set to "Jeep" , AND ALSO car.manyCars["b"] is valid syntax, returning "Jeep" .

I was wondering if somebody could give me a clear explanation of what actually happens when you declare an object literal, because clearly my current understanding is not complete.

Answer 1

In JavaScript, the keys in object literal notation are treated as strings whether or not they are in quotes. Thus, with this:

var car = { manyCars : {a: "Saab", "b": "Jeep"}, 7: "Mazda" };

If you then do this:

for (var k in car) { console.log("key: " + k + " (type: " + typeof(k) + ")"); }

the output will be:

key: 7 (type: string)
key: manyCars (type: string)

Note that the (apparently) numeric key 7 is also a string . You can even use JavaScript keywords as keys in an object literal.

Note that when accessing a value by key, the rules are more stringent. For instance, you must use subscript notation and quotes when a key is a reserved word. Also, a bare key in an object literal must (if it isn't a numeric literal) be a valid JavaScript identifier name, so it cannot contain spaces, commas, or JavaScript operators ( + , = , etc.).

Answer 2

In JavaScript objects literals are made up of key-value pairs. Keys in JavaScript are always strings while values may be of any data type.

JavaScript provides syntactic sugar for defining keys. For example unlike string literals you don't need to quote keys. Hence the following two examples are equivalent:

{ x: 0 }   // example 1
{ "x": 0 } // example 2

However this syntactic sugar only works for identifiers that don't have any whitespace (ie spaces, tabs, newlines, etc.) in between them. For example, the following is invalid in JavaScript:

{ a property: 0 } // whitespace not allowed in identifiers

However you can workaround this limitations by quoting the identifier:

{ "a property": 0 } // valid

You may also use boolean ( true or false ), number literals and undefined and null as keys. However remember that they are coerced to strings. Hence you can do:

var o = {
    undefined: 1,
    null: 2,
    true: 3,
    false: 4,
    0: 5
};

Then you can access them as:

alert(o.undefined); // 1
alert(o.null);      // 2
alert(o.true);      // 3
alert(o.false);     // 4
alert(o[0]);        // 5

The last statement is important. Number literals by themselves do not classify as valid identifiers. Hence you need to use the array bracket notation ( [] ) instead of the dot notation ( . ) to access it.

Since all keys in JavaScript are strings you could even do:

alert(o["undefined"]); // 1
alert(o["null"]);      // 2
alert(o["true"]);      // 3
alert(o["false"]);     // 4
alert(o["0"]);         // 5

However you can't use objects, arrays or functions as keys. For example the following is invalid:

{ {1: 2}: 3 }            // objects can't be used as keys
{ [1]: 2 }               // arrays can't be used as keys
{ function () {}: true } // functions can't be used as keys

That's all you need to know about object literals.

Answer 3

Essentially an object literal in javascript operates very similar to a dictionary but also has the functionality of an object in Java or PHP. The objects can have functions defined within or properties, or both. You can use quotes or dot syntax depending on the keys you are trying to access. Some may have special characters, then you'd want to use the quotes, if no special characters, use dot. Both are correct.

Here is a useful resource comparing and contrasting the difference between creating object literals and creating objects by constructor.

http://net.tutsplus.com/tutorials/javascript-ajax/the-basics-of-object-oriented-javascript/

Here's another one going more in depth on the use of object literals

http://javascript.info/tutorial/objects