前提:	基础计算机基础, 了解基础的HTML 和 CSS, 熟悉 JavaScript 基础 (基础知识看这里 First steps 和这里 Building blocks).
目标:	理解面相对象编程背后的基础理论, 怎样理解 JavaScript ("一切皆对象most things are objects"), 如何开始使用JavaScript对象.

对象基础

首先, 将 oojs.html 文件复制到本地. 此文件包含非常少 — 一个供我们写源代码的 <script> 标签, 一个供我们输入示例指令的 <input> 标签，当页面被渲染时, 一些变量定义, 一个输出任何输入到<input>的内容输出到<p>标签的函数。我们用这个文件做为基础探索对象的基础语法.

如同Javascript中的很多东西一样，创建一个对象通常先定义初始化变量。 尝试在您已有的文件中JavaScript代码下面输入以下内容, 保存刷新页面:

var person = {};

如果你在input标签里输入person然后点击按钮, 你会得到如下结果:

[object Object]

恭喜你, 你刚创建了你的第一个对象. 干的漂亮! 但这是一个空对象，所以我们做不了更多的事情。像下面一样更新下我们的对象:

var person = {
  name : ['Bob', 'Smith'],
  age : 32,
  gender : 'male',
  interests : ['music', 'skiing'],
  bio : function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

保存刷新后, 尝试在你的input标签里输入下面的内容:

person.name[0]
person.age
person.interests[1]
person.bio()
person.greeting()

现在在你的对象里得到了一些数据和功能(functionality)，现在可以通过简单的语法访问他们了!

那么这里发生了什么？ 嗯，一个对象由多个成员组成，每个成员有一个名称(例如上面的 name 和 age )和一个值(例如 [\'Bob \'，\'Smith\'] 和 32 )。 每个名称/值对必须用逗号分隔，每种情况下的名称和值都用冒号分隔。 语法总是遵循此模式:

var objectName = {
  member1Name : member1Value,
  member2Name : member2Value,
  member3Name : member3Value
}

对象成员的值可以是任何东西 - 在我们的person对象中，我们有一个字符串，数字，两个数组和两个函数。 前四个项目是数据项，被称为对象的属性。 最后两个项目是允许对象用该数据做某事的函数，并且被称为对象的方法。

像这样的对象被称为对象字面量 - 我们已经逐字地写出了对象内容，因为我们来创建它。 这与从类实例化的对象相反，稍后我们将讨论。

当您希望以某种方式传输一系列结构化的相关数据项时，使用对象常量创建对象是很常见的，例如向服务器发送要放入数据库的请求。 发送单个对象比分别发送多个项要有效得多，并且当您想要按名称标识各个项时，它比数组更容易使用。

点符号

上面，您使用点符号访问了对象的属性和方法。 对象名称(人)充当命名空间 - 必须首先输入该对象才能访问对象中的任何封装的。 接下来你写一个点，然后你想访问的项目 - 这可以是一个简单的属性的名称，数组属性的一个项目，或者调用一个对象的方法，例如:

person.age
person.interests[1]
person.bio()

子名称空间

甚至可以使对象的值成为另一个对象。 例如，尝试更改名称成员

name : ['Bob', 'Smith'],

至

name : {
  first : 'Bob',
  last : 'Smith'
},

这里我们有效地创建了子命名空间。 这听起来很复杂，但真的不是 - 访问这些项目，你只需要链接额外的步骤到另一个点的末端。 试试这些:

person.name.first
person.name.last

重要:此时，您还需要完成方法代码并更改任何实例

name[0]
name[1]

至

name.first
name.last

否则你的方法将不再工作。

括号符号

还有另一种方法来访问对象属性 - 使用括号符号。 而不是使用这些:

person.age
person.name.first

您可以使用

person['age']
person['name']['first']

这看起来非常类似于如何访问数组中的项目，它基本上是一样的东西 - 而不是使用索引号来选择一个项目，你使用的名称与每个成员的值相关联。 难怪对象有时被称为关联数组 - 它们以数组将数字映射到值的相同方式将字符串映射到值。

设置对象成员

到目前为止，我们只看到检索(或获取)对象成员 - 您还可以设置(更新)对象成员的值，只需声明您想要的成员 设置(使用点或括号表示法)，如下所示:

person.age = 45
person['name']['last'] = 'Cratchit'

尝试输入这些行，然后再次获取成员，以查看他们如何改变:

person.age
person['name']['last']

设置成员不仅仅停止更新现有属性和方法的值; 您还可以创建完全新的成员。 试试这些:

person['eyes'] = 'hazel'
person.farewell = function() { alert("Bye everybody!") }

您现在可以测试您的新成员:

person['eyes']
person.farewell()

括号表示法的一个有用的方面是它可以用于动态设置成员值，但也可以设置成员名。 假设我们希望用户能够通过在两个文本输入中键入成员名称和值，将自定义值类型存储在其人员数据中？ 我们可以得到这样的值:

var myDataName = nameInput.value
var myDataValue = nameValue.value

我们可以将这个新的成员名和值添加到 person 对象，如下所示:

person[myDataName] = myDataValue

要测试这一点，请尝试将以下行添加到代码中，位于 person 对象的结束大括号下面:

var myDataName = 'height'
var myDataValue = '1.75m'
person[myDataName] = myDataValue

现在尝试保存和刷新，并在文本输入中输入以下内容:

person.height

这是不可能的点符号，它只能接受文字成员名称，而不是指向名称的变量值。

这是什么"？

你可能已经注意到我们的方法中有些奇怪的东西。 看看这个例子:

greeting: function() {
  alert('Hi! I\'m ' + this.name.first + '.');
}

你可能想知道"这个"是什么。 this 关键字指的是代码被写入的当前对象 - 因此在这种情况下此等效于 person 。 那么为什么不直接写 person 呢？ 您将在面向初学者的面向对象JavaScript 文章中看到，当我们开始创建构造函数等时， this 是非常有用的 - 它将始终确保在成员的上下文改变时使用正确的值(例如，两个不同的 person 对象实例可能具有不同的名称，但是在说出他们的问候语时想要使用自己的名称 )。

让我们用简化的人物对象来说明我们的意思::

var person1 = {
  name : 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

var person2 = {
  name : 'Brian',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

在这种情况下， person1.greeting()会输出"Hi！I\'m Chris。 person2.greeting()另一方面将输出"Hi！I\'m Brian。"，即使方法的代码在每种情况下是完全相同的。 正如我们前面所说，这个等于代码所在的对象 - 当你用手写出对象字面量时，这不是非常有用，但是当你动态地 生成对象(例如使用构造函数)。 这将变得更清楚以后。

你一直都在使用对象

正如你经历过这些例子，你可能一直认为你使用的点符号是非常熟悉的。 这是因为你在整个课程中一直使用它！ 每次我们通过一个使用内置浏览器API或JavaScript对象的示例，我们一直使用对象，因为这些功能使用完全相同的对象结构，我们在这里看到 ，虽然比我们自己的定制例子更复杂。

所以当你使用字符串方法如:

myString.split(',');

您正在使用 字符串的实例上提供的方法 > 类。 每次在代码中创建一个字符串时，该字符串将自动创建为 String 的一个实例，因此有几个常用的方法/属性可供使用。

当你使用这样的行访问文档对象模型时:

var myDiv = document.createElement('div');
var myVideo = document.querySelector('video');

您正在使用 文档 实例上提供的方法， 类。 对于每个加载的网页，创建 Document 的实例，称为 document ，代表整个页面的结构，内容和其他功能， 再次，这意味着它有几个常用的方法/属性可用。

几乎任何其他内置的对象/ API，你一直在使用 - / Global_Objects / Array"> Array ， > Math 等。

注意，内置的Objects / APIs不总是自动创建对象实例。 例如，通知API (允许新型浏览器触发系统通知)需要 您可以使用要触发的每个通知的构造函数来实例化一个新的对象实例。 尝试在您的JavaScript控制台中输入以下内容:

var myNotification = new Notification('Hello!');

同样，我们将在后面的文章中讨论构造函数。

概要

恭喜，您已经达到我们的第一个JS对象文章的结束 - 您现在应该知道如何使用JavaScript中的对象 - 包括创建自己的简单对象。 您还应该明白，对象作为存储相关数据和功能的结构是非常有用的 - 如果您试图将我们的 person 对象中的所有属性和方法作为单独的变量和函数进行跟踪， 低效和令人沮丧的，我们会冒着与其他变量和函数冲突的风险与同名。 对象让我们保持信息安全地锁在自己的包，从危害的方式。

在下一篇文章中，我们将开始讨论面向对象编程(OOP)理论，以及如何在JavaScript中使用这种技术。