JavaScript 对象
现实生活中的对象
在现实生活中，对象是指：房子、汽车、人、动物或任何其他主体。
这是一个汽车对象的例子
| 汽车对象 | 属性 | 方法 |
|---|---|---|
|
car.name = 菲亚特 car.model = 500 car.weight = 850kg car.color = 白色 |
car.start() car.drive() car.brake() car.stop() |
对象属性
现实生活中的汽车具有属性，例如重量和颜色
car.name = 菲亚特，car.model = 500，car.weight = 850kg，car.color = 白色。
汽车对象具有相同的属性，但值因汽车而异。
对象方法
现实生活中的汽车具有方法，例如启动和停止
car.start(), car.drive(), car.brake(), car.stop().
汽车对象具有相同的方法，但这些方法是在不同时间执行的。
JavaScript 变量
JavaScript 变量是数据值的容器。
此代码将简单值 (Fiat) 赋给名为 car 的变量
JavaScript 对象
对象也是变量。但对象可以包含许多值。
此代码将许多值 (Fiat, 500, white) 赋给名为 car 的对象
JavaScript 对象定义
如何定义 JavaScript 对象
- 使用对象字面量
- 使用
new关键字 - 使用对象构造函数
JavaScript 对象字面量
对象字面量是花括号 {} 内的名称:值对列表。
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
注意
名称:值对也称为键:值对。
对象字面量也称为对象初始化器。
创建 JavaScript 对象
这些示例创建了一个具有 4 个属性的 JavaScript 对象
示例
// 创建一个对象
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
自己动手试一试 »
空格和换行符不重要。对象初始化器可以跨多行
// 创建一个对象
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
自己动手试一试 »
此示例创建了一个空的 JavaScript 对象，然后添加了 4 个属性
// 创建一个对象
const person = {};
// 添加属性
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
自己动手试一试 »
使用 new 关键字
此示例使用 new Object() 创建了一个新的 JavaScript 对象，然后添加了 4 个属性
示例
// 创建一个对象
const person = new Object();
// 添加属性
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
自己动手试一试 »
注意
上面的例子做的事情完全一样。
但是，没有必要使用 new Object()。
为了可读性、简单性和执行速度，请使用对象字面量方法。
对象属性
JavaScript 对象中的命名值称为属性。
| 属性 | 值 |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
以名称值对形式写入的对象类似于
- PHP 中的关联数组
- Python 中的字典
- C 中的哈希表
- Java 中的哈希映射
- Ruby 和 Perl 中的哈希
访问对象属性
您可以通过两种方式访问对象属性
objectName.propertyName
objectName["propertyName"]
JavaScript 对象方法
方法是可以对对象执行的动作。
方法是作为属性值存储的函数定义。
| 属性 | 属性值 |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + " " + this.lastName;} |
示例
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
自己动手试一试 »
在上面的示例中，this 指的是person 对象
this.firstName 表示 person 的 firstName 属性。
this.lastName 表示 person 的 lastName 属性。
在 JavaScript 中，对象为王。
如果你理解对象，你就理解 JavaScript。
对象是属性和方法的容器。
属性是命名值。
方法是作为属性存储的函数。
属性可以是原始值、函数，甚至是其他对象。
在 JavaScript 中，几乎“一切”都是对象。
- 对象就是对象
- 数学是对象
- 函数是对象
- 日期是对象
- 数组是对象
- Map 是对象
- Set 是对象
除了原始值之外，所有 JavaScript 值都是对象。
JavaScript 原始值
原始值是没有属性或方法的值。
3.14 是一个原始值
原始数据类型是具有原始值的数据。
JavaScript 定义了 7 种原始数据类型
string数字booleannullundefinedsymbolbigint
不可变
原始值是不可变的（它们是硬编码的，不能更改）。
如果 x = 3.14，您可以更改 x 的值，但不能更改 3.14 的值。
| 值 | 类型 | 注释 |
|---|---|---|
| "Hello" | string | "Hello" 永远是 "Hello" |
| 3.14 | 数字 | 3.14 永远是 3.14 |
| true | boolean | true 永远是 true |
| false | boolean | false 永远是 false |
| null | null (对象) | null 永远是 null |
| undefined | undefined | undefined 永远是 undefined |
JavaScript 对象是可变的
对象是可变的：它们通过引用而不是通过值寻址。
如果 person 是一个对象，则以下语句不会创建 person 的副本
const x = person;
对象 x 不是 person 的副本。对象 x 就是 person。
对象 x 和对象 person 共享相同的内存地址。
对 x 的任何更改也会更改 person
示例
//创建一个对象
const person = {
firstName:"John",
lastName:"Doe",
age:50, eyeColor:"blue"
}
// 创建一个副本
const x = person;
// 同时更改两者中的 Age
x.age = 10;
自己动手试一试 »
注意
您将在后续章节中学习更多关于对象的内容。
