首页 > 文章 > 前端

JavaScript原型链详解与继承实现方法

时间：2026-03-28 12:52:38 118浏览收藏

JavaScript的原型链是其对象系统的核心机制，通过每个对象内部的[[Prototype]]属性逐级向上连接至null，形成一条属性和方法查找的“追溯链条”，不仅支撑着继承、instanceof判断等关键特性，更是理解this绑定、对象行为乃至现代class语法底层原理的基石；文章深入浅出地解析了原型链的构成逻辑、手写继承的完整实现步骤（包括实例属性继承、原型链建立与constructor修复），并对比说明了直接赋值原型的风险，最后自然过渡到ES6 class背后的原型链本质——掌握它，才能真正读懂JavaScript“看似简单”表象下的运行真相。

javascript中的原型链是什么_如何通过它实现继承功能

JavaScript 中的原型链是对象查找属性和方法时所依赖的一条“向上追溯”的链条，它的核心在于每个对象都有一个内部属性 [[Prototype]]（可通过 __proto__ 访问，或更推荐用 Object.getPrototypeOf()），指向它的原型对象；而这个原型对象本身也可能有原型，如此逐级向上，直到为 null 为止——这条链就是原型链。

原型链怎么构成

每个函数（包括构造函数）都有一个 prototype 属性，它是一个对象，默认带有一个 constructor 属性指回该函数。当用 new 调用函数创建实例时，实例的 [[Prototype]] 会自动指向该函数的 prototype 对象。

例如：

function Person(name) { this.name = name; }
Person.prototype.sayHello = function() { console.log('Hello, ' + this.name); };
const p = new Person('Alice');
console.log(p.sayHello()); // Hello, Alice
console.log(p.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

如何用原型链实现继承

让子类型的原型对象等于父类型的实例，就能使子类型实例沿原型链访问到父类型的属性和方法。这是最基础的原型链继承方式。

定义父构造函数，并把共用方法挂到其 prototype 上
定义子构造函数，在其内部调用父构造函数（如 Parent.call(this, ...)）来继承实例属性
将子构造函数的 prototype 设为父构造函数的一个实例（常用 Object.create(Parent.prototype)）
修复子构造函数的 constructor 指向（因为替换 prototype 后 constructor 会丢失）

为什么不能直接赋值 `Dog.prototype = Animal.prototype`

那样会让 Dog 和 Animal 共享同一个原型对象，修改 Dog.prototype 就等于修改 Animal.prototype，破坏封装性。必须用 Object.create() 创建新对象作为 Dog 的原型，保持独立性。

现代替代方案：class 与 extends

ES6 的 class 语法本质仍是基于原型链，只是更简洁、更易读：

class Animal {
  constructor(name) { this.name = name; }
  eat() { console.log(this.name + ' is eating'); }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  bark() { console.log('Woof!'); }
}

const d = new Dog('Max', 'Husky');
d.eat(); // Max is eating
d.bark(); // Woof!

底层依然是设置 Dog.prototype.[[Prototype]] 指向 Animal.prototype，并确保 super() 正确调用父构造函数。

基本上就这些。原型链不是语法糖，而是 JavaScript 对象机制的底层支柱；理解它，才能真正看懂 this、继承、instanceof、hasOwnProperty 等行为背后的逻辑。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

资料下载