首页 > 文章 > 前端

JavaScript原型链是什么，继承怎么实现

时间：2026-03-04 08:58:40 281浏览收藏

JavaScript的原型链是其对象系统的核心机制，描述了对象如何通过内部[[Prototype]]属性逐级向上查找属性和方法，最终抵达null的继承链条；它不仅是instanceof、hasOwnProperty等行为的基础，更是实现继承的根本方式——从手动设置Object.create(Parent.prototype)并修复constructor，到ES6 class与extends的语法糖，底层始终依赖这一不可替代的原型链结构，真正理解它，才能穿透JS表层语法，掌握this绑定、属性访问、类型判断等关键特性的本质逻辑。

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 等行为背后的逻辑。

好了，本文到此结束，带大家了解了《JavaScript原型链是什么，继承怎么实现》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

资料下载