JavaScript原型链与类继承详解

深入解析JavaScript类与继承：原型链机制详解 JavaScript中，虽然没有传统面向对象语言的“类”，但通过构造函数和原型，我们可以模拟实现类与继承。ES6引入的`class`语法糖，让代码更易读，但其底层依然基于原型链。本文将详细解析JavaScript中类与继承的实现原理，从构造函数和`prototype`的使用，到原型链的构建，再到ES6 `class`语法的本质，带你彻底理解JavaScript中“类”与继承的奥秘。掌握原型链，你将能更好地理解JavaScript的面向对象特性，提升代码质量和可维护性。了解对象属性和方法的查找机制，以及如何利用`Object.getPrototypeOf()`和`instanceof`进行原型链的判断。

JavaScript通过构造函数和原型模拟类，ES6的class是语法糖，继承依靠原型链实现，属性方法沿对象、原型逐级查找。

JavaScript 中没有传统面向对象语言中的“类”概念，但可以通过构造函数和原型机制来模拟类与继承。ES6 引入了 class 语法糖，让写法更接近其他语言，但底层依然基于原型链。

使用构造函数和原型模拟类

在 ES6 之前，开发者通过构造函数和 prototype 来模拟类：

示例：

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
};

const p1 = new Person('Alice');
p1.sayHello(); // 输出: Hello, I am Alice

这里 p1 的原型是 Person.prototype，调用 sayHello 时会沿着原型链查找。

实现继承：借助原型链

要实现子类继承父类，核心是让子类的原型对象继承父类的实例或原型。

经典组合继承示例：

function Student(name, grade) {
  Person.call(this, name); // 借用父类构造函数
  this.grade = grade;
}

// 建立原型链
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.study = function() {
  console.log(this.name + ' is studying in grade ' + this.grade);
};

const s1 = new Student('Bob', 8);
s1.sayHello(); // Hello, I am Bob
s1.study();    // Bob is studying in grade 8

此时访问 s1.sayHello()，JS 引擎会按以下路径查找：

ES6 class 语法：更清晰的写法

ES6 的 class 并非新机制，只是上述模式的语法糖：

class Animal {
  constructor(type) {
    this.type = type;
  }
  speak() {
    console.log(this.type + ' makes a sound');
  }
}

class Dog extends Animal {
  constructor(type, name) {
    super(type); // 调用父类构造函数
    this.name = name;
  }
  bark() {
    console.log(this.name + ' barks!');
  }
}

const dog = new Dog('dog', 'Max');
dog.speak(); // dog makes a sound
dog.bark();  // Max barks!

尽管写法更简洁，背后的原型链关系不变：Dog.prototype.__proto__ === Animal.prototype，这就是方法能被继承的关键。

理解原型链的本质

原型链的本质是对象之间的链接关系，用于属性和方法的查找。

你可以用 Object.getPrototypeOf(obj) 或 obj.__proto__ 查看原型，用 instanceof 判断是否在原型链中出现过。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript原型链与类继承详解》文章吧，也可关注golang学习网公众号了解相关技术文章。