基于流程的记事梳理JS构造函数学习步骤

比喻理解JS构造函数

想象你是一家汽车工厂的厂长，JS构造函数就像是汽车生产线上的“汽车制造模板机器”。

每一辆汽车都可以看作是一个JavaScript对象。当你想要生产一批具有相同基本特征的汽车时，就会用到这台“模板机器”。比如，你设定这台机器生产的汽车都要有四个轮子、一个发动机（这些相当于对象的属性），并且具备启动和驾驶的功能（这些相当于对象的方法）。只要启动这台“模板机器”，传入一些特定的参数（比如汽车颜色、型号等），它就能按照设定生产出一辆辆具体的汽车对象。

内在化理解JS构造函数

回忆一下你制作手工饼干的过程。JS构造函数就如同你制作饼干时使用的饼干模具。

你准备了一堆面团（可以类比为创建对象所需的原材料），而饼干模具（构造函数）决定了饼干的基本形状（对象的基本结构和属性）。每次你用模具按压面团，就像是调用构造函数，制作出的饼干（对象）都具有模具所赋予的形状特征。而且，你可以给每个饼干添加一些个性化的装饰（类似于给对象添加额外的属性或方法），但它们都保留着由模具决定的基本特征。

基于流程的记事梳理JS构造函数学习步骤

1. 理解构造函数的基本概念：
   • 定义与作用：明确构造函数是一种特殊的函数，它用于创建对象的实例。在JavaScript中，构造函数就像一个对象的“创建工厂”，通过它可以批量创建具有相似属性和方法的对象。例如，我们要创建多个“人物”对象，每个“人物”都有名字和年龄属性，以及打招呼的方法，就可以使用构造函数来实现。
   • 命名规范：通常构造函数的命名以大写字母开头，以便与普通函数区分开来。这就像在工厂里，专门用于生产特定产品的机器会有一个特殊的标识，让人们一眼就能认出它的用途。例如：

function Person(name, age) {
    // 函数体内容
}

这里 Person 就是一个构造函数。
2. 构造函数的内部机制：
- this关键字：学习构造函数内部的 this 关键字。在构造函数中，this 指向新创建的对象实例。当构造函数被调用时，JavaScript会自动创建一个新的空对象，this 就代表这个新对象。然后通过给 this 添加属性和方法，来定义新对象的特征和行为。例如：

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function () {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    };
}

这里通过 this.name = name 和 this.age = age 为新创建的 Person 对象实例添加了 name 和 age 属性，通过 this.sayHello = function () {... } 为其添加了 sayHello 方法。
- new关键字：掌握使用 new 关键字来调用构造函数。当使用 new 调用构造函数时，会执行以下操作：
- 创建一个新的空对象。
- 将构造函数的作用域赋给新对象（因此 this 指向这个新对象）。
- 执行构造函数中的代码，为新对象添加属性和方法。
- 返回新对象。例如：

const john = new Person('John', 30);
john.sayHello(); // 输出: Hello, my name is John and I'm 30 years old.

这里通过 new Person('John', 30) 创建了一个 Person 对象的实例 john，并调用了 sayHello 方法。
3. 构造函数与原型：
- 原型的概念：了解每个函数（包括构造函数）都有一个 prototype 属性，它指向一个对象，这个对象被称为原型对象。原型对象的作用是让所有通过该构造函数创建的对象实例共享属性和方法。例如，对于上面的 Person 构造函数，可以这样使用原型：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};
const jane = new Person('Jane', 25);
jane.sayHello(); // 输出: Hello, my name is Jane and I'm 25 years old.

这里将 sayHello 方法定义在 Person.prototype 上，所有 Person 对象实例（如 jane）都可以访问到这个方法，这样可以避免每个对象实例都重复创建相同的方法，节省内存。
- 原型链：理解当访问一个对象的属性或方法时，如果该对象自身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链顶端（null）。例如，如果 jane 对象自身没有某个方法，但它的原型对象 Person.prototype 上有，就可以通过原型链找到并使用这个方法。这就像在一个家族中，如果一个人没有某种技能，但他的家族长辈有，他就可以从长辈那里“继承”这个技能。
4. 构造函数的应用场景：
- 对象创建与初始化：构造函数最常见的应用场景是创建具有相同结构和行为的对象，并对其进行初始化。比如创建多个“用户”对象，每个“用户”都有用户名、密码等属性，以及登录、注销等方法。通过构造函数可以方便地创建这些对象并设置初始值。
- 代码复用与组织：使用构造函数可以将相关的属性和方法封装在一起，提高代码的复用性和组织性。例如，在开发一个游戏时，可以使用构造函数创建多个“角色”对象，每个“角色”都有生命值、攻击力等属性和攻击、防御等方法，通过构造函数可以更好地管理和维护这些代码。

画图表展示JS构造函数结构关系

组件	描述	与整体关系
构造函数	用于创建对象实例的特殊函数	汽车制造模板机器或饼干模具
- 命名规范	通常以大写字母开头	特殊标识，区分于普通函数
- this关键字	指向新创建的对象实例，用于添加属性和方法	指代正在生产的汽车或正在制作的饼干
- new关键字	调用构造函数，触发对象创建过程	启动模板机器或按压饼干模具
原型（prototype）	函数的属性，指向原型对象	模具的设计蓝图，定义共享特征
- 原型对象	包含可被对象实例共享的属性和方法	家族长辈拥有的共享技能
原型链	对象查找属性和方法的路径	家族继承技能的链条
对象实例	通过构造函数创建的具体对象	生产出的汽车或制作好的饼干
应用场景	对象创建与初始化、代码复用与组织	汽车生产、饼干制作及相关管理维护