谈谈JavaScript中创建对象(Object)_米淇淋的专栏文章_微信文章

在这篇文章中我将会着重说明如何创建和调用JavaScript里的对象（Object）。

对象（Object）是什么？

在开始介绍如何创建对象前，我们要知道对象是什么。对象（Object）简单地来说，就是一堆「名称- 值」的配对（key - value pairs）。至于可以放入哪些值呢？

第一种是原生的值（primitive），像是布尔值（Boolean）、数值（Number）或是字符串（String），而在对象当中，我们把这类的值称为属性（Property）。

第二种可以放入的值是对象（Object），也就是在一个对象里面再嵌入一个对象，这种以对象为值的情况我们也把它称作属性（Property）。

第三种放入的值可以是函数（function），在对象的情况下，我们会把这种函数称做方法（method）。在对象中的每一个Property或是Method都会占据电脑当中一个记忆体的位置，在需要使用到的时候，把它们调取出来。

接下来我将介绍三种创建JavaScript里的对象及如何调用的方法：

方法一：使用 [ ]

创建对象

创建对象的第一个方法是使用[ ]，[ ]在JavaScript中被称做Computed Member Access：

让我们看一下底下的例子：

// 创建对象
var person = new Object();
person["firstname"] = "Jay";
person["lastname"] = "Chou";
复制代码

这是利用[ ]创建对象的方法，首先我们创建一个对象，叫做person，接着开始给它「名称-值」配对，例如，firstname是属性的名称，Jay则是它的值；lastname也是属性名称，Chou则是它的值。通过这种方法，我们就可以创建对象里面的各种「名称-值」配对。

调用对象

紧接上面的例子，我们也同样可以利用[ ]来调用已经建立好的对象，[ ]里面如果放的是字符串而不是变量，注意要记得加上引号'像是这样：

// 调用对象
console.log(person["firstname"]);  // Jay
复制代码

另外，如果是通过[ ]来调用对象的话，还有一个特别的地方，就是[ ]内可以放变量，像是这样（当[ ]里面放的是变量时不用加引号"），一样可以调用到对象的值，这个是用种方法二（.）做不到的：

// 调用对象
var id = "lastname";
console.log(person[id]);  // Chou
复制代码

方法二：使用点符号 .

创建对象

第二种创建对象的方法是使用英文的句点 .，在JavaScript中被称做Member Access，创建的方法如下：我们在刚刚创建的person这个对象里面，再创建一个对象属性，名称为address。其实，我觉得可以把.翻译成中文的「的」，所以这里的意思就是，在person的里面创建一个名称为address的对象；在person的address的country，创建一个值为"China"，以此类推...。

// 创建对象
person.address = new Object();
person.address.country = "China";
person.address.city = "Hangzhou";
person.address.location = "Xihu";
复制代码

调用对象

同样的方法也可以用来调用出该对象的值：

// 调用对象
console.log(person.address);  //{country: "China", city: "Hangzhou", location: "Xihu"}
console.log(person.address.country);  // China
console.log(person["address"]["location"]);  // Xihu
复制代码

从上面可以看出，. 和[ ]是可以交替使用的。

方法三：使用{ }

创建对象

其实还有在创建对象上有更快的做法，我们可以直接使用{ }，我们可以把上面的代码，改成这样：

// 创建对象
var person = {
    firstname: "Jay",
    lastname: "Chou",
    address: {
        country: "China",
        city: "Hangzhou",
        location: "Xihu"
    }
}
复制代码

通过这种方式，可以得到与方法二一模一样的结果，调用方法也一致。

搭配函数使用对象

在我们创建好对象后，我们可以搭配函数(function)来使用对象，例如，我先把刚刚创建的对象person，改成叫做jaychou。

var jaychou = {
    firstname: "Jay",
    lastname: "Chou",
    address: {
        country: "China",
        city: "Hangzhou",
        location: "Xihu"
    }
}
复制代码

接着创建一个名称为SayHI的函数，并且带入我们的对象：

function SayHI(people) {
    console.log("HI" + people.lastname);
}

SayHI(jaychou);  // HI Chou
复制代码

直接在函数参数的地方创建对象

我们也可以直接在调用函数的同时创建对象，像是这样子：

SayHI({firstname: "Jony", lastname: "J"});  // HI J
复制代码

一开始看到这样的写法可能会觉得很奇怪，但其实这种方式和我们直接在函数的参数里面输入字符串或数值是一样的意思，只是这里是创建一个对象。我们把这种直接在函数的参数中创建对象的方法称做"creating object on the fly"（即动态创建对象）。

其他说明

其实使用new Object不是创建对象最好的方式，这点会在之后的文章再作说明。另外，虽然使用[ ]和.都可以拿来创建对象和调用对象，但还是建议尽量使用点符号.作为创建对象和调用对象的方法，这样比较干净简洁，在debug的时候也比较容易。

还有不论你使用的是new Object、"."、或者直接用"{ }"来创建对象，其实在JavaScript转译之后，本质上做的都是同样的事。它都会将这个对象建立在记忆体中，并创建该对象的属性（property）和方法（method）在记忆体中。

如果觉得文章对你有些许帮助，欢迎在我的GitHub博客点赞和关注，感激不尽！