前端笔记之面向对象、原型链、继承

JavaScript 的面向对象编程（OOP）基于 原型（Prototype） 机制，而非传统的类继承。

对象与构造函数

对象

JavaScript 中的对象是键值对的集合，可以动态添加或删除属性：

const obj = {
    name: "John" };
obj.age = 30; // 动态添加属性

构造函数

构造函数用于创建多个结构相似的对象，通过 new 调用：

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

const person1 = new Person("John", 30);
const person2 = new Person("Alice", 25);

new 的作用：
创建一个空对象。
将该对象的 proto 指向构造函数的 prototype。
将 this 绑定到新对象。
执行构造函数代码。
若构造函数无显式返回，则返回新对象。

原型（Prototype）与原型链

原型对象

每个函数都有一个 prototype 属性（原型对象）。
实例共享原型上的属性和方法，减少内存占用：

Person.prototype.greet = function() {
   
  console.log(`Hello, I'm ${
     this.name}`);
};

person1.greet(); // 输出: Hello, I'm John

proto 与原型链

每个对象都有一个 proto 属性，指向其构造函数的原型对象。

原型链：对象在查找属性时，沿 proto 链向上查找，直到 Object.prototype（终点为 null）：

person1.toString(); // 来自 Object.prototype

关键点

prototype 是函数属性，proto 是对象属性。
现代代码建议使用 Object.getPrototypeOf(obj) 替代 proto。

继承的 5 种方式

原型链继承

function Parent(name) {
   
  this.name = name || "Parent";
  this.colors = ["red", "blue"];
}
Parent.prototype.sayName = function() {
   
  console.log(this.name);
};

function Child() {
   }
// 关键：将 Child 的原型指向 Parent 的实例（继承方法）
Child.prototype = new Parent(); 

// 问题1：无法向 Parent 传参
const child1 = new