Javascript对象

学习目标

理解对象的概念：对象是 JavaScript 中的复杂数据类型，它由一组无序的键值对组成。每个键值对由一个键（属性名）和一个值（属性值）组成。
创建和访问对象：理解如何使用字面量和构造函数创建对象，以及如何访问和修改对象的属性和方法。
理解对象的方法：对象的方法是存储在对象属性中的函数。理解如何定义和调用对象的方法，以及 this 关键字在对象方法中的用法。
理解原型和原型链：每个 JavaScript 对象都有一个内部链接到另一个对象的 [[Prototype]] 属性，这就形成了所谓的 "原型链"。理解原型链是如何支持属性和方法的继承的。
理解构造函数和 new 操作符：构造函数是用来创建新对象的特殊函数，new 操作符用于实例化一个新对象。
理解 ES6 中的类：ES6 引入了类（class）语法，它是构造函数的语法糖。理解如何使用类定义对象，以及类的构造函数，实例方法，静态方法和继承。
理解对象的属性描述符：理解如何使用 Object.getOwnPropertyDescriptor 和 Object.defineProperty 来获取和设置对象属性的特性，例如可枚举性，可写性，可配置性。
理解高级对象概念：包括对象的遍历，深拷贝和浅拷贝，以及如何使用 Object.create，Object.assign，Object.keys 等内置方法。

学习方法

浸泡：

每天在教程里泡一下，看一下，玩一玩。
看你用的，不要看那些一辈子都用不到的。

读文档：

Javascript参考手册
读完了，就在“尝试一下”里试一下。

魔改：

在“尝试一下”里，大胆修改，改到"面目全非"。

学习应有的态度：
学新东西，就得面临探索未知的东西，所以你必须得是一个有信心的人！没有信心就是废物一个。
信心就是对未知的东西的一种勇气和信念！惧怕的人没有出息。

课程内容

在这一课里，我们回顾了上一课的例子：简单的计算器，深入理解了其中toString()这个函数的功能。

由这个函数出发，我们又学习了数据类型和对象的概念，并且简单了解了菜鸟教程中关于对象的文档。

点击这里下载本课的示范代码。

Javascript对象：把同类数据组合起来

我们先从一个例子开始：

假设现在你需要写一个学生管理的页面。在这个页面上，你需要记录学生的名字、学号、年龄、性别这四个信息，那么你的代码可能会这么写：

<script>
  var name = '张小花';
  var id = 'S01';
  var age = '10';
  var gender = '女';
</script>

在上面这段代码里，为了记录张小花的信息，你用了四个变量，name，id，age和gender。这看起来没什么问题。

但是，如果现在再多一个学生，王小草，你会发现你的变量不够用了。如果你把name改为王小草，那么张小花的名字就无法存储了。

一个解决办法是使用更多的变量。于是，你的代码可能会变成这样：

<script>
  var name1 = '张小花';
  var id1 = 'S01';
  var age1 = '10';
  var gender1 = '女';
  
  var name2 = '王小草';
  var id2 = 'S02';
  var age2 = '11';
  var gender2 = '女';
</script>

你把原来的变量名后面加上了数字来作为区分，这下就能同时记录张小花和王小草的信息了。

看起来问题似乎解决了。但是，如果你需要记录的是5个学生、10个学生，你还能用同样的方法吗？那我们需要20个、40个变量，这样写代码是非常低效的，实际操作中根本做不到。

为了解决这一类的问题，我们需要使用Javascript里的一个重要概念：对象（Object）。

1. 什么是Javascript对象

在 JavaScript 中，对象是一种复杂的数据类型，它由一组键值对组成。键是字符串（或者 Symbol），值可以是任何数据类型。对象可以用来模拟现实世界的复杂结构和行为。

JavaScript对象是一种用于组织和存储相关数据和功能的容器。

你可以把对象想象成一个盒子，盒子里可以放很多东西。

对象由属性和方法组成。属性是对象的特征或描述，就像盒子里的物品一样。每个属性都有一个名称和对应的值。方法就是对这个对象的操作。

举一个简单的例子：我们可以用一个对象来代表“立方体”。

立方体的属性是：长、宽、高。
立方体的方法就是用它的长、宽、高计算它的面积或者体积。

只要我们了解了对象的属性，了解了对象的方法，就可以对这个对象进行操作。

这就叫做编程。我们编写的程序其实全是在对对象进行操作。

2. 创建和访问对象

2.1 创建对象

在 JavaScript 中，我们通常使用对象字面量或 new Object() 构造函数来创建对象：

let obj1 = {}; // 使用对象字面量创建对象
let obj2 = new Object(); // 使用 new Object() 创建对象

我们也可以在创建对象时直接定义属性和方法：

let person = {
  name: 'Alice',
  age: 25,
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

2.2 访问对象

我们可以使用点符号或方括号来访问对象的属性和方法：

console.log(person.name); // 输出 "Alice"
console.log(person['age']); // 输出 25
person.greet(); // 输出 "Hello, Alice"

3. 对象的方法

对象的方法是存储在对象属性中的函数。在方法内部，this 关键字指向调用该方法的对象。

let person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};
person.greet(); // 输出 "Hello, Alice"

4. 原型和原型链

每个 JavaScript 对象都有一个内部链接到另一个对象的 [[Prototype]] 属性，这就形成了所谓的 "原型链"。当我们试图访问一个对象的属性时，如果该对象自身没有这个属性，JavaScript 会沿着原型链查找这个属性。

let animal = {
  eats: true
};
let rabbit = {
  jumps: true,
  __proto__: animal
};
console.log(rabbit.eats); // 输出 true

5. 构造函数和 `new` 操作符

构造函数是用来创建新对象的特殊函数，我们通常将构造函数的首字母大写。new 操作符用于实例化一个新对象。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let alice = new Person('Alice', 25);
console.log(alice.name); // 输出 "Alice"

6. ES6 中的类

ES6 引入了类（class）语法，它是构造函数的语法糖。我们可以使用 class 关键字定义类，使用 constructor 定义构造函数，使用 extends 实现继承。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log('Hello, ' + this.name);
  }
}
let alice = new Person('Alice', 25);
alice.greet(); // 输出 "Hello, Alice"

7. 对象的属性描述符

我们可以使用 Object.getOwnPropertyDescriptor 和 Object.defineProperty 来获取和设置对象属性的特性，例如可枚举性，可写性，可配置性。

let person = { name: 'Alice' };
let descriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descriptor.enumerable); // 输出 true
console.log(descriptor.writable); // 输出 true
console.log(descriptor.configurable); // 输出 true

8. 高级对象概念

8.1 对象的遍历

我们可以使用 for...in 循环，Object.keys，Object.values，Object.entries 等方法遍历对象的属性。

8.2 深拷贝和浅拷贝

在 JavaScript 中，对象是通过引用赋值的，所以我们需要理解深拷贝和浅拷贝的概念。

8.3 内置方法

理解如何使用 Object.create，Object.assign，Object.keys 等内置方法。

以上就是学习 JavaScript 对象的详细指南。希望你能通过学习这个指南，掌握 JavaScript 对象的基本知识和使用方法。祝你学习愉快！

案例：学生信息管理

回到上一个学生信息管理的例子，我们可以创建一个叫做“student"的对象来代表学生的数据，这个对象的每个属性，都可以用来存储学生的对应的数据。

student对象的属性是：

name：姓名
id：学号
age：年龄
gender：性别

用Javascript代码来表示，就是：

<script>
  var student = {
    name: '张小花',
    id: 'S01',
    age: '8',
    gender: '女'
  };
</script>

通过student这个对象，跟学生相关的数据都被组织在一起了。这样你操作学生数据的时候就会更加方便了。

在上面的代码中，你能看到对象有哪些特点？

对象使用花括号 {} 来表示。当你看到一段代码以 { 开始，并以 } 结束，中间包含了一些属性和方法，那么这就是一个JavaScript对象。
对象中的每个属性都有自己的值。在上面的代码中，student这个对象中包括四个属性：name、id、age、gender，冒号:后面的内容就是每个属性的值。

当你看到一段代码符合上面这两个特征，你就基本上可以判断出来这是一个对象了。

常见的对象举例

我们可以读一下菜鸟教程上的Javascript参考手册，看看有哪些常见的对象：

https://www.runoob.com/js/js-objects.html

其中提到：所有事物都是对象。

JavaScript自己就建立了很多对象。这些常见的对象包括：

字符串 String
日期 Date
数组 Array

你可以阅读参考手册，查找一下这些常见对象的属性和方法：

字符串的属性和方法：https://www.runoob.com/js/js-obj-string.html
日期的属性和方法：https://www.runoob.com/js/js-obj-date.html
数组的属性和方法：https://www.runoob.com/js/js-obj-array.html

这些参考手册中包含了大量的实例，你可以点击“尝试一下”，自己去写一写、试一试，开始去熟悉这些常见对象的属性和方法。

如果你很熟悉这些常见对象的用法，你写代码的时候就会事半功倍！

【学习方法】读文档是程序员的必备能力。如果你读文档只是从头读到尾，那你就是不会读文档。正确的读文档方法，是：快速浏览，建立框架，混个脸熟；动手尝试，大胆魔改，实践出真知；不要卡在细节里，遇到问题就问专家。

编程的框架

编程就是关于变量和函数。

任何知识都有框架体系。之前我们学习的内容：Vuetify是建立在Vue的基础上的，Vue是建立在Javascript的基础上的。

今天学习的内容：Javascript对象。
Javascript对象的重要概念：属性、方法。

属性是Javascript对象自带的变量。
方法是Javascript对象自带的函数。

对象，英文叫Object; 也可以当作“东西”；东西有自己的属性，也有对应的操作方法。

对象里有方法，方法就是函数。

比如：一个对象是“立方体”，【属性】是“长、宽、高”；【方法】是一求它的面积或体积，它回来的就是面积或体积的值。

我们写的程序全是对象；了解了对象的属性，了解对象的方法，就可以对这个对象进行操作；这叫做编程

Javascript对象：HTML DOM对象

前面一个尖括号，后面一个斜杠尖括号里面就是一个DOM ；DOM是个对象；是HTML的一部分

Javascript对象：Window对象（浏览器对象）

Window对象：就是浏览器；开了一个浏览器页面就会有一个浏览器的对象。

Javascript对象：Array对象（数组对象）

Javascript数组对象的方法：

map()
concat()

软件开发的框架

MVC：

M = model，数据
V = view，页面
C = control，数据与页面中间的控制

养成一个框架性的思维模式。

下一节课的学习内容：Vuetify

本课作业

多去尝试Javascript对象、数组对象、字符串对象、浏览器对象、HTML DOM对象
复习Vue的内容

## 学习目标

1. **理解对象的概念**：对象是 JavaScript 中的复杂数据类型，它由一组无序的键值对组成。每个键值对由一个键（属性名）和一个值（属性值）组成。
2. **创建和访问对象**：理解如何使用字面量和构造函数创建对象，以及如何访问和修改对象的属性和方法。
3. **理解对象的方法**：对象的方法是存储在对象属性中的函数。理解如何定义和调用对象的方法，以及 `this` 关键字在对象方法中的用法。
4. **理解原型和原型链**：每个 JavaScript 对象都有一个内部链接到另一个对象的 `[[Prototype]]` 属性，这就形成了所谓的 "原型链"。理解原型链是如何支持属性和方法的继承的。
5. **理解构造函数和 `new` 操作符**：构造函数是用来创建新对象的特殊函数，`new` 操作符用于实例化一个新对象。
6. **理解 ES6 中的类**：ES6 引入了类（class）语法，它是构造函数的语法糖。理解如何使用类定义对象，以及类的构造函数，实例方法，静态方法和继承。
7. **理解对象的属性描述符**：理解如何使用 `Object.getOwnPropertyDescriptor` 和 `Object.defineProperty` 来获取和设置对象属性的特性，例如可枚举性，可写性，可配置性。
8. **理解高级对象概念**：包括对象的遍历，深拷贝和浅拷贝，以及如何使用 `Object.create`，`Object.assign`，`Object.keys` 等内置方法。

## 学习方法

浸泡：
- 每天在教程里泡一下，看一下，玩一玩。
- 看你用的，不要看那些一辈子都用不到的。

读文档：
- Javascript参考手册
- 读完了，就在“尝试一下”里试一下。

魔改：
- 在“尝试一下”里，大胆修改，改到"面目全非"。

学习应有的态度：
学新东西，就得面临探索未知的东西，所以你必须得是一个有信心的人！没有信心就是废物一个。
信心就是对未知的东西的一种勇气和信念！惧怕的人没有出息。

## 课程内容

在这一课里，我们回顾了上一课的例子：简单的计算器，深入理解了其中```toString()```这个函数的功能。

由这个函数出发，我们又学习了数据类型和对象的概念，并且简单了解了菜鸟教程中关于对象的文档。

[点击这里下载本课的示范代码。](https://dl.openjianghu.org/training/download-code-it-training-level00-lesson05-2022-08-09.zip "点击这里下载本课的示范代码。")

## Javascript对象：把同类数据组合起来

我们先从一个例子开始：

假设现在你需要写一个学生管理的页面。在这个页面上，你需要记录学生的名字、学号、年龄、性别这四个信息，那么你的代码可能会这么写：

```html
<script>
  var name = '张小花';
  var id = 'S01';
  var age = '10';
  var gender = '女';
</script>
```

在上面这段代码里，为了记录张小花的信息，你用了四个变量，`name`，`id`，`age`和`gender`。这看起来没什么问题。

但是，如果现在再多一个学生，王小草，你会发现你的变量不够用了。如果你把`name`改为王小草，那么张小花的名字就无法存储了。

一个解决办法是使用更多的变量。于是，你的代码可能会变成这样：

```html
<script>
  var name1 = '张小花';
  var id1 = 'S01';
  var age1 = '10';
  var gender1 = '女';
  
  var name2 = '王小草';
  var id2 = 'S02';
  var age2 = '11';
  var gender2 = '女';
</script>
```

你把原来的变量名后面加上了数字来作为区分，这下就能同时记录张小花和王小草的信息了。

看起来问题似乎解决了。但是，如果你需要记录的是5个学生、10个学生，你还能用同样的方法吗？那我们需要20个、40个变量，这样写代码是非常低效的，实际操作中根本做不到。

为了解决这一类的问题，我们需要使用Javascript里的一个重要概念：对象（Object）。

## 1. 什么是Javascript对象

在 JavaScript 中，对象是一种复杂的数据类型，它由一组键值对组成。键是字符串（或者 Symbol），值可以是任何数据类型。对象可以用来模拟现实世界的复杂结构和行为。

JavaScript对象是一种用于组织和存储相关数据和功能的容器。

你可以把对象想象成一个盒子，盒子里可以放很多东西。

对象由属性和方法组成。属性是对象的特征或描述，就像盒子里的物品一样。每个属性都有一个名称和对应的值。方法就是对这个对象的操作。

举一个简单的例子：我们可以用一个对象来代表“立方体”。

- 立方体的属性是：长、宽、高。
- 立方体的方法就是用它的长、宽、高计算它的面积或者体积。

只要我们了解了对象的属性 ，了解了对象的方法，就可以对这个对象进行操作。

这就叫做编程。我们编写的程序其实全是在对对象进行操作。

## 2. 创建和访问对象

### 2.1 创建对象

在 JavaScript 中，我们通常使用对象字面量或 `new Object()` 构造函数来创建对象：

```
let obj1 = {}; // 使用对象字面量创建对象
let obj2 = new Object(); // 使用 new Object() 创建对象

```

我们也可以在创建对象时直接定义属性和方法：

```
let person = {
  name: 'Alice',
  age: 25,
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

```

### 2.2 访问对象

我们可以使用点符号或方括号来访问对象的属性和方法：

```
console.log(person.name); // 输出 "Alice"
console.log(person['age']); // 输出 25
person.greet(); // 输出 "Hello, Alice"

```

## 3. 对象的方法

对象的方法是存储在对象属性中的函数。在方法内部，`this` 关键字指向调用该方法的对象。

```
let person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

person.greet(); // 输出 "Hello, Alice"

```

## 4. 原型和原型链

每个 JavaScript 对象都有一个内部链接到另一个对象的 `[[Prototype]]` 属性，这就形成了所谓的 "原型链"。当我们试图访问一个对象的属性时，如果该对象自身没有这个属性，JavaScript 会沿着原型链查找这个属性。

```
let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

console.log(rabbit.eats); // 输出 true

```

## 5. 构造函数和 `new` 操作符

构造函数是用来创建新对象的特殊函数，我们通常将构造函数的首字母大写。`new` 操作符用于实例化一个新对象。

```
function Person(name, age) {
  this.name = name;
  this.age = age;
}

let alice = new Person('Alice', 25);
console.log(alice.name); // 输出 "Alice"

```

## 6. ES6 中的类

ES6 引入了类（class）语法，它是构造函数的语法糖。我们可以使用 `class` 关键字定义类，使用 `constructor` 定义构造函数，使用 `extends` 实现继承。

```
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

greet() {
    console.log('Hello, ' + this.name);
  }
}

let alice = new Person('Alice', 25);
alice.greet(); // 输出 "Hello, Alice"

```

## 7. 对象的属性描述符

我们可以使用 `Object.getOwnPropertyDescriptor` 和 `Object.defineProperty` 来获取和设置对象属性的特性，例如可枚举性，可写性，可配置性。

```
let person = { name: 'Alice' };
let descriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descriptor.enumerable); // 输出 true
console.log(descriptor.writable); // 输出 true
console.log(descriptor.configurable); // 输出 true

```

## 8. 高级对象概念

### 8.1 对象的遍历

我们可以使用 `for...in` 循环，`Object.keys`，`Object.values`，`Object.entries` 等方法遍历对象的属性。

### 8.2 深拷贝和浅拷贝

在 JavaScript 中，对象是通过引用赋值的，所以我们需要理解深拷贝和浅拷贝的概念。

### 8.3 内置方法

理解如何使用 `Object.create`，`Object.assign`，`Object.keys` 等内置方法。

以上就是学习 JavaScript 对象的详细指南。希望你能通过学习这个指南，掌握 JavaScript 对象的基本知识和使用方法。祝你学习愉快！

## 案例：学生信息管理

回到上一个学生信息管理的例子，我们可以创建一个叫做“student"的对象来代表学生的数据，这个对象的每个属性，都可以用来存储学生的对应的数据。

`student`对象的属性是：

- `name`：姓名
- `id`：学号
- `age`：年龄
- `gender`：性别

用Javascript代码来表示，就是：

```html
<script>
  var student = {
    name: '张小花',
    id: 'S01',
    age: '8',
    gender: '女'
  };
</script>
```

通过`student`这个对象，跟学生相关的数据都被组织在一起了。这样你操作学生数据的时候就会更加方便了。

在上面的代码中，你能看到对象有哪些特点？

- 对象使用花括号 `{}` 来表示。当你看到一段代码以 `{` 开始，并以 `}` 结束，中间包含了一些属性和方法，那么这就是一个JavaScript对象。
- 对象中的每个属性都有自己的值。在上面的代码中，`student`这个对象中包括四个属性：`name`、`id`、`age`、`gender`，冒号`:`后面的内容就是每个属性的值。

当你看到一段代码符合上面这两个特征，你就基本上可以判断出来这是一个对象了。

## 常见的对象举例

我们可以读一下菜鸟教程上的Javascript参考手册，看看有哪些常见的对象：

https://www.runoob.com/js/js-objects.html

其中提到：所有事物都是对象。

JavaScript自己就建立了很多对象。这些常见的对象包括：

- 字符串 String
- 日期 Date
- 数组 Array

你可以阅读参考手册，查找一下这些常见对象的属性和方法：

- 字符串的属性和方法：https://www.runoob.com/js/js-obj-string.html

- 日期的属性和方法：https://www.runoob.com/js/js-obj-date.html
- 数组的属性和方法：https://www.runoob.com/js/js-obj-array.html

这些参考手册中包含了大量的实例，你可以点击“尝试一下”，自己去写一写、试一试，开始去熟悉这些常见对象的属性和方法。

如果你很熟悉这些常见对象的用法，你写代码的时候就会事半功倍！

```txt
【学习方法】读文档是程序员的必备能力。如果你读文档只是从头读到尾，那你就是不会读文档。正确的读文档方法，是：快速浏览，建立框架，混个脸熟；动手尝试，大胆魔改，实践出真知；不要卡在细节里，遇到问题就问专家。
```

### 编程的框架