JavaScript面向对象编程详解：从原型到类101

JavaScript 是一种动态类型的脚本语言，它不像 Java 或 C++ 那样直接支持面向对象编程（OOP）的类语法。然而，JavaScript 通过其原型（prototype）机制实现了基于原型的面向对象编程，并且在 ES6 中引入了 `class` 语法，使得 JavaScript 的面向对象编程更加清晰易懂。本文将深入探讨 JavaScript 中的面向对象编程，从原型继承到类语法，并辅以示例代码进行讲解。

一、原型（Prototype）继承

JavaScript 的面向对象编程的核心在于原型继承。每个对象都有一个 `__proto__` 属性（在现代浏览器中，最好使用 `()` 方法访问），指向其原型对象。当访问一个对象的属性或方法时，如果该对象本身没有该属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端（`null`）。这就是原型继承的机制。

例如：```javascript
function Person(name) {
= name;
}
= function() {
("Hello, my name is " + );
};
let person1 = new Person("Alice");
(); // 输出：Hello, my name is Alice
```

在这个例子中，`Person` 函数充当构造函数，`` 是 `Person` 函数的原型对象。`greet` 方法被添加到原型对象上，所以所有 `Person` 的实例都可以访问 `greet` 方法。 `person1` 的 `__proto__` 指向 ``，所以 `()` 可以调用到 `()`。

二、原型链

原型链是多个原型对象通过 `__proto__` 属性连接起来形成的链条。当查找一个对象的属性时，JavaScript 引擎会沿着原型链依次向上查找，直到找到该属性或者到达原型链的顶端（`null`）。理解原型链对于理解 JavaScript 的继承机制至关重要。

例如：```javascript
function Student(name, major) {
(this, name); // 调用 Person 构造函数
= major;
}
= (); // 设置 Student 的原型
= Student; // 重要：修正 constructor 属性
let student1 = new Student("Bob", "Computer Science");
(); // 输出：Hello, my name is Bob
(); // 输出：Computer Science
```

在这个例子中，`Student` 继承自 `Person`。`()` 创建一个新对象，其原型为 ``，然后将这个新对象赋值给 ``。这样，`Student` 的实例就能够访问 `Person` 的原型上的方法和属性，同时也能拥有自己的属性（`major`）。 ` = Student;` 这行代码非常重要，因为 `` 会将 `constructor` 属性指向 `Person`，需要手动修正。

三、ES6 类语法

ES6 引入了 `class` 语法，使得 JavaScript 的面向对象编程更加简洁易懂。`class` 语法是基于原型的语法糖，其底层仍然是原型继承。

例如：```javascript
class Person {
constructor(name) {
= name;
}
greet() {
("Hello, my name is " + );
}
}
class Student extends Person {
constructor(name, major) {
super(name); // 调用父类构造函数
= major;
}
}
let person2 = new Person("Charlie");
let student2 = new Student("David", "Mathematics");
(); // 输出：Hello, my name is Charlie
(); // 输出：Hello, my name is David
(); // 输出：Mathematics
```