回归基础: JavaScript的对象语法
前端大学，每天精选前端干货文章，帮您提升前端技术！
对象是JavaScript语言的基础。许多内置数据类型，如：错误、正则表达式和函数，在JavaScript中也表示为对象。所以想要成为一名优秀JavaScript工程师，就必须牢牢掌握对象的工作原理。本文将教你在JavaScript创建和使用对象的基础知识。
对象是又原型和其他对象创建的复合数据类型。一个对象创建的块通常被称为它的属性或是字段。属性被用来描绘对象的某些方面。例如，可以用一个属性来可以描绘一个列表的长度，一只狗的颜色或者某人的出生日期。
创建对象
在JavaScript中创建对象是非常简单的，JS为我们提供了 object literal notation（对象字面量的符号）的语法去快速创建一个对象。对象字面量的符号用大括号来表示。以下示例就是创建了一个没有属性的空对象。
`var object = {};`在大括号里面，属性及其值被指定为一组键值。键可以是字符串或者标识符，值可以是任何有效的表达式。键和值中间用冒号分割，键值对间用逗号来分割。下面这个例子就是用字面量方式创建的具有三个属性的对象。第一个属性foo是数字1，第二个属性bar被定义成了字符串类型，并存储一个字符串值。第三个属性baz存储了一个空对象。
var object = {
foo: 1,
"bar": "some string",
baz: {
}
};注意上面例子使用的空格，每个属性被写在单独一行并缩进，可见在这种格式下代码更可读。尤其是在当有许多属性或者嵌套对象时。
访问属性
JavaScript提供了两个符号去访问对象的属性。首先，最常见的一种是点符号。在这种方式下，通过对象名后加属性名的方式去访问这个对象的属性。下面示例告诉我们如何用点符号去读写一个属性。如果object.foo的值是1，那么执行这个语句后值为2。如果object.foo没有一个值，那么它将变成 undefined。
`object.foo = object.foo + 1;`另一个访问对象属性的语法是括号符号。在这种方式下，对象名后跟一个方括号，方括号里面是字符串形式的属性名。下面的这个就是用括号符号的方式重写的上面点符号方式的例子。虽然代码看起来是不同，但是它们的功能是相同的。
`object["foo"] = object["foo"] + 1;`括号法比点符号方法更强大，因为它可以允许一个变量去表示一个或者部分的属性名。这是由于在方括号内，JavaScript解释器能自动转换为一个字符串，并去检索其对应的属性。下面这个例子就是如何用括号法动态创建属性名。其中，属性名foo就是由变量f和字符串"oo"拼接出来的。
var f = "f";
object[f + "oo"] = "bar";括号字符方法也允许属性名包含在点符号方法中被禁止的字符。下面语句在括号字符的方法中是完全合法的，但如果在同样的点符号方法中，就会语法报错。
`object["!@#$%^&*()."] = true;`访问嵌套属性
点字符方法或则括号字符方法都能访问嵌套属性。下面的这个例子，定义的对象就是包含者一个baz嵌套对象，baz对象又包含了一个foo对象，foo对象中又有一个bar属性，值为5。
var object = {
baz: {
foo: {
bar: 5
}
}
};接下来例子，我们来看一下如何访问嵌套属性的bar。第一个方式我们用的是点字符方法。而第二种方法我们用的是括号字符法，第三种我们用两种方法组合的方式去访问。它们得到的都是同样的结果。
object.baz.foo.bar;
object["baz"]["foo"]["bar"];
object["baz"].foo["bar"];如果每次都像之前这样去引用，可能会造成造成效率低下。如果同一个属性需要被使用数次。我们可以把它存在一个本地变量里为了以后去使用。下面的这个例子， bar将在循环里被使用数次。为了避免反复去引用同一个值，我们把它存在一个本地变量中。
var bar = object.baz.foo.bar;
var count = 0;
for (var i = 0; i < 100000; i++) {
count += bar;
// better than count += object.baz.foo.bar;
}--ADVERTISEMENT--
函数作为方法
当函数作为一个对象的属性时，它被叫做“方法”。类似与属性，方法也能用对象字面量的方法去创建。下面这个例子就是如何创建一个方法。
var object = {
sum: function(foo, bar) {
return foo + bar;
}
};方法能用点或者括号的符号去执行。下面的这个例子展示了分别用点字符和括号字符方法去执行sum() 方法。
object.sum(1, 2);
object["sum"](1, 2);增加属性和方法
对象字面量符号被用来创建一个新的对象。但是它不能增加已经存在的属性和方法。幸好，向对象添加新数据像创建赋值语句一样简单。下面这个例子创建了一个空的对象。然后用赋值语句增加了两个属性-foo和bar，和一个方法baz。这是例子用了点字符的方法，括号字符的方法也是一样的。
var object = {};
object.foo = 1;
object.bar = null;
object.baz = function() {
return "hello from baz()";
};总结
本文主要讲了JavaScript对象语法的基础部分。它对于你理解JavaScript对象是非常重要的，同时对象也是其实JavaScript其他语法的基础。千里之行始于足下，在JavaScript 的世界，在面向对象编程之前，你首先要理解对象。
原文链接：http://www.zcfy.cc/article/back-to-basics-javascript-object-syntax-4076.html?t=new
推荐阅读：