坚持的本身就是意义
目录
直观类比
- 类（Class） = 图纸 / 模板
- 实例（Instance） = 根据图纸造出来的房子 / 产品
类 (Class) vs 实例 (Instance)
对比表
| 对比点 | 类 (Class) | 实例 (Instance) |
|---|---|---|
| 定义方式 | 使用 class 关键字定义 |
使用 new 类名(...) 创建 |
| 打印结果 | 打印出来的是 类的结构/定义 | 打印出来的是 对象（属性 + 值） |
| 内存位置 | 存在于函数（构造器）区域 | 存在于堆内存，每次 new 都是新的对象 |
| 属性 | 类本身没有具体属性值，只定义结构 | 实例对象上有具体的属性和值 |
| 方法 | 方法定义在类的 prototype 上 |
实例可以直接调用这些方法 |
| 用途 | 相当于一个“模板” | 相当于由模板生产出来的“成品” |
| 例子代码 | console.log(Person)👉 输出： class Person { constructor(...) {...} speak() {...} } |
console.log(p1)👉 输出： Person { name: '张三', age: 22 } |
示例代码
class Person {
name: string
age: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
speak() {
console.log(`我叫${this.name}，今年${this.age}岁`)
}
}
console.log(Person) // 类的定义
const p1 = new Person("张三", 22)
console.log(p1) // 实例对象 Person { name: '张三', age: 22 }
p1.speak() // 调用实例方法 我叫张三，今年22岁
类 - 原型 - 实例关系图
┌─────────────────────────┐
│ class Person │
│ ─────────────────────── │
│ constructor(name, age) │
│ speak() { ... } │ ← 方法挂到 prototype 上
└─────────────┬───────────┘
│
▼
┌─────────────────┐
│ Person.prototype│ ← 原型对象
│ ─────────────── │
│ speak() { ... } │ ← 共享方法
│ constructor: f │
└───────▲─────────┘
│ [[Prototype]]
┌────────────┴────────────┐
│ │
┌──┴───────────┐ ┌──────┴───────────┐
│ p1 实例 │ │ p2 实例 │
│ ─────────── │ │ ─────────── │
│ name: '张三' │ │ name: '李四' │
│ age: 22 │ │ age: 18 │
└──────────────┘ └──────────────────┘
解释：
类 (class Person)
- 定义了构造函数和方法。
- 方法其实会自动挂载到 Person.prototype 上。
原型 (Person.prototype)
- 所有实例共享的方法都存在这里。例如 speak() 方法，只存一份，所有实例都能通过原型链访问。
实例 (new Person(…))
- 每次 new 都会创建一个新的对象（放在堆内存里），对象上存储 独有的数据属性（name, age）。
- 调用 p1.speak() 时，JS 引擎会：
- 先找 p1 本身有没有 speak
- 找不到 → 顺着 proto（即原型链）去 Person.prototype 找
- 找到后执行
class Person {
constructor(name, age) {
this.name = name
this.age = age
}
speak() {
console.log(`我叫${this.name}，今年${this.age}岁`)
}
}
const p1 = new Person("张三", 22)
console.log(p1) // Person { name: '张三', age: 22 }
console.log(Person.prototype) // { speak: f, constructor: f }
console.log(p1.__proto__ === Person.prototype) // true
总结：
- 类 (Class) 是模板，方法都放在 prototype 上。
- 实例 (Instance) 存放自己的数据属性。
- 实例通过 proto 链接到 Person.prototype，形成原型链来共享方法。