JS 中构造函数从入门到熟练怎么系统学习-js教程-PHP中文网

构造函数是解决批量创建同结构对象及共享行为问题的关键机制。它通过new四步过程创建实例，区分实例成员（this赋值）与原型成员（prototype挂载），并借助instanceof和constructor实现精准类型判断。

js 中构造函数从入门到熟练怎么系统学习

构造函数不是独立知识点，它是理解 JavaScript 对象机制的钥匙。想真正掌握，不能只背语法，得顺着“为什么需要它→它怎么工作→怎么用得准又省”这条线走。

先搞清它存在的真实原因

当你反复写这样的对象时：

const p1 = { name: '张三', age: 22, say() { console.log(this.name) } }
const p2 = { name: '李四', age: 25, say() { console.log(this.name) } }
const p3 = { name: '王五', age: 28, say() { console.log(this.name) } }

问题就来了：每个对象都有一份重复的 say 方法，占内存；改一个逻辑要改三处；新增属性容易漏。构造函数就是为解决这类“批量创建同结构对象+共享行为”的问题而生的。

动手跑通 new 的四步执行过程

别死记，打开浏览器控制台，逐行运行这个例子：

function Person(name, age) {
  console.log('步骤1：new 创建空对象');
  console.log('步骤2：this 指向这个新对象 →', this);
  this.name = name;
  this.age = age;
  console.log('步骤3：给 this 添加属性 →', this);
  // 步骤4：自动返回 this，不用写 return
}

然后执行：const me = new Person('小明', 20)。你会亲眼看到每一步发生了什么——这才是理解 this 在构造调用中为何总指向新实例的关键。

立刻区分实例成员和原型成员

刚学会写 this.xxx = xxx 很容易把所有东西都挂到实例上。但真正高效的做法是：

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

**实例成员**（每个对象独有）：姓名、年龄、ID 等值不同的数据 → 写在构造函数体内，用 this
**原型成员**（所有实例共享）：say()、getInfo() 这类通用方法 → 写在 Constructor.prototype 上

例如：

function Student(name, grade) {
  this.name = name;
  this.grade = grade;
}
Student.prototype.introduce = function() {
  return `我是${this.name}，年级${this.grade}`;
};
const s1 = new Student('小红', 3);
const s2 = new Student('小刚', 4);
console.log(s1.introduce === s2.introduce); // true ← 方法只存一份