JavaScript 对象
现实生活中的对象
在现实生活中,对象 是诸如房屋、汽车、人、动物或任何其他事物的实体。
这是一个汽车对象 的例子
汽车对象 | 属性 | 方法 |
---|---|---|
car.name = Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start() car.drive() car.brake() car.stop() |
对象属性
一辆现实生活中的汽车拥有属性,例如重量和颜色
car.name = Fiat, car.model = 500, car.weight = 850kg, car.color = white.
汽车对象具有相同的属性,但值因汽车而异。
对象方法
一辆现实生活中的汽车拥有方法,例如启动和停止
car.start(), car.drive(), car.brake(), car.stop().
汽车对象具有相同方法,但这些方法是在不同的时间执行的。
JavaScript 变量
JavaScript 变量是用来存储数据值的容器。
此代码将一个简单值(Fiat)分配给名为 car 的变量
JavaScript 对象
对象也是变量。但对象可以包含多个值。
此代码将多个值(Fiat, 500, white)分配给名为 car 的对象
JavaScript 对象定义
如何定义 JavaScript 对象
- 使用对象字面量
- 使用
new
关键字 - 使用对象构造函数
JavaScript 对象字面量
对象字面量是花括号{}内的一组name:value对。
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
注意
name:value 对 也称为键值对。
对象字面量 也称为对象初始化器。
创建 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 中,几乎“所有东西”都是对象。
- 对象是对象
- 数学是对象
- 函数是对象
- 日期是对象
- 数组是对象
- 映射是对象
- 集合是对象
除了基本类型之外,所有 JavaScript 值都是对象。
JavaScript 基本类型
基本值 是一个没有属性或方法的值。
3.14 是一个基本值
基本数据类型 是具有基本值的数据。
JavaScript 定义了 7 种基本数据类型
string
number
boolean
null
undefined
symbol
bigint
不可变
基本值是不可变的(它们是硬编码的,不能更改)。
如果 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 对象是可变的
对象是可变的:它们通过引用寻址,而不是通过值寻址。
如果 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;
// 在两者中更改年龄
x.age = 10;
尝试一下 »
注意
您将在后面的章节中了解更多关于对象的信息。