JavaScript 对象定义
JavaScript 对象定义
在 JavaScript 中，对象是王。如果您理解了对象，就理解了 JavaScript。
在 JavaScript 中，几乎“所有事物”都是对象。
- 布尔是对象（如果用 new 关键词定义）
- 数字是对象（如果用 new 关键词定义）
- 字符串是对象（如果用 new 关键词定义）
- 日期永远都是对象
- 算术永远都是对象
- 正则表达式永远都是对象
- 数组永远都是对象
- 函数永远都是对象
- 对象永远都是对象
所有 JavaScript 值，除了原始值，都是对象。
JavaScript 原始值
原始值指的是没有属性或方法的值。
原始数据类型指的是拥有原始值的数据。
JavaScript 定义了 5 种原始数据类型：
- string
- number
- boolean
- null
- undefined
原始值是一成不变的（它们是硬编码的，因此不能改变）。
假设 x = 3.14，您能够改变 x 的值。但是您无法改变 3.14 的值。
| 值 | 类型 | 注释 |
|---|---|---|
| "Hello" | string | "Hello" 始终是 "Hello" |
| 3.14 | number | 3.14 始终是 3.14 |
| true | boolean | true 始终是 true |
| false | boolean | false 始终是 false |
| null | null | (object) null 始终是 null |
| undefined | undefined | undefined 始终是 undefined |
对象是包含变量的变量
JavaScript 变量能够包含单个的值：
示例代码：
var person = "Bill Gates";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p id="demo"></p>
<script>
// 创建并显示变量：
var person = "Bill Gates";
document.getElementById("demo").innerHTML = person;
</script>
</body>
</html>
运行结果：
Javascript 变量 Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
对象也是变量。但是对象能够包含很多值。
值按照名称 : 值对的形式编写（名称和值以冒号分隔）。
示例代码：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>创建 JavaScript 对象</h1>
<p id="demo"></p>
<script>
var person = {
firstName : "Bill",
lastName : "Gates",
age : 62,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>
</body>
</html>
运行结果：
创建 Javascript 对象 Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript 对象是命名值的集合。
对象属性
JavaScript 对象中的命名值，被称为属性。
| 属性 | 值 |
|---|---|
| firstName | Bill |
| lastName | Gates |
| age | 62 |
| eyeColor | blue |
以名称值对书写的对象类似于：
- PHP 中的关联数组
- Python 中的字典
- C 中的哈希表
- Java 中的哈希映射
- Ruby 和 Perl 中的散列
对象方法
方法是可以在对象上执行的动作。
对象属性可以是原始值、其他对象以及函数。
对象方法是包含函数定义的对象属性。
| 属性 | 值 |
|---|---|
| firstName | Bill |
| lastName | Gates |
| age | 62 |
| eyeColor | blue |
| fullName | function() {return this.firstName + " " + this.lastName;} |
JavaScript 对象是被称为属性和方法的命名值的容器。
您将在下一章中学到更多有关方法的知识。
创建 JavaScript 对象
通过 JavaScript，您能够定义和创建自己的对象。
有不同的方法来创建对象：
- 定义和创建单个对象，使用对象文字。
- 定义和创建单个对象，通过关键词 new。
- 定义对象构造器，然后创建构造类型的对象。
在 ECMAScript 5 中，也可以通过函数 Object.create() 来创建对象。
使用对象字面量
这是创建对象最简答的方法。
使用对象文字，您可以在一条语句中定义和创建对象。
对象文字指的是花括号 {} 中的名称:值对（比如 age:62）。
下面的例子创建带有四个属性的新的 JavaScript 对象：
示例代码：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>
运行结果：
Javascript 对象创建 Bill 已经 62 岁了。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
空格和折行不重要。对象定义可横跨多行：
示例代码：
var person = {
firstName:"Bill",
lastName:"Gates",
age:62,
eyeColor:"blue"
};
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName : "Bill",
lastName : "Gates",
age : 62,
eyeColor : "blue"
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>
运行结果：
Javascript 对象创建 Bill 已经 62 岁了。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用 JavaScript 关键词 new
下面的例子也创建了带有四个属性的新的 JavaScript 对象：
示例代码：
var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
运行结果：
Bill is 50 years old.
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
上面的两个例子结果是一样的。无需使用 new Object()。
出于简易性、可读性和执行速度的考虑，请使用第一种创建方法（对象文字方法）。
JavaScript 对象是易变的
对象是易变的：它们通过引用来寻址，而非值。
如果 person 是一个对象，下面的语句不会创建 person 的副本：
var x = person; // 这不会创建 person 的副本。
对象 x 并非 person 的副本。它就是 person。x 和 person 是同一个对象。
对 x 的任何改变都将改变 person，因为 x 和 person 是相同的对象。
示例代码：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}
var x = person;
x.age = 10; // 这将同时改变 both x.age 和 person.age
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象是易变的</h1>
<p>对对象副本的任何更改也将更改原始对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}
var x = person;
x.age = 10;
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
运行结果：
Javascript 对象是易变的 对对象副本的任何更改也将更改原始对象。 Bill is 10 years old.
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：JavaScript 变量不是易变的。只有 JavaScript 对象如此。
