JavaScript原型继承_javascript对象系统-js教程-PHP中文网

JavaScript原型继承_javascript对象系统

紅蓮之龍

发布： 2025-12-02 16:58:40

原创

811人浏览过

JavaScript继承基于原型链，对象通过[[Prototype]]链接到原型，查找属性时逐层向上追溯直至Object.prototype或null。构造函数的prototype属性为实例提供共享方法和属性，实例的__proto__指向构造函数的prototype。原型链形成于对象原型的嵌套链接，实现继承的核心是让子类原型指向父类实例或原型。常见继承方式包括：原型链继承（共享属性问题）、组合继承（借用构造函数+原型链，推荐）以及ES6 class语法（语法糖，底层仍为原型）。class通过extends实现继承，super调用父类构造器，提升代码可读性。关键点：所有对象均有原型，属性查找依循原型链；构造函数、prototype与实例三者关联；继承本质是扩展原型链；ES6 class为首选语法，但原型机制始终是基础。理解原型与原型链是掌握JavaScript面向对象编程的核心。

javascript原型继承_javascript对象系统

JavaScript的继承机制基于原型（Prototype），不同于传统面向对象语言中的类继承。每个对象都有一个内部链接指向另一个对象，这个被指向的对象就是它的“原型”。当访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript引擎会自动去它的原型上查找，这一过程会持续向上直到找到属性或到达原型链的末端（null）。

原型与构造函数的关系

在JavaScript中，使用构造函数创建对象时，构造函数会自动生成一个prototype属性，这个属性是一个对象，包含可以被所有实例共享的属性和方法。

每个通过构造函数创建的实例，其内部都持有一个指向构造函数prototype的链接（通常表示为[[Prototype]]，可通过__proto__访问）。

构造函数的prototype是实例的原型
实例的__proto__等于构造函数的prototype
原型对象默认有一个constructor属性，指向构造函数本身

示例：

立即学习“Java免费学习笔记（深入）”；

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

const john = new Person("John");
john.greet(); // 输出: Hello, I'm John
// john.__proto__ === Person.prototype → true

登录后复制

原型链的形成

当一个对象的原型本身也有原型时，就形成了原型链。查找属性时，JavaScript会沿着这条链逐层查找。

对象自身 → 原型对象 → 原型的原型 → ... → Object.prototype → null
Object.prototype是绝大多数对象的最终原型，它的[[Prototype]]是null
所有函数的原型最终继承自Function.prototype，而Function.prototype的原型是Object.prototype

例如：

BrandCrowd

一个在线Logo免费设计生成器

159

查看详情

const obj = {};
// obj.toString() 实际来自 Object.prototype
obj.hasOwnProperty('name'); // 来自 Object.prototype

登录后复制

实现继承的方法

JavaScript中可以通过多种方式实现对象间的继承，核心是让子类型的原型指向父类型的实例或原型。

1. 原型链继承

function Animal() { this.type = "animal"; }
Animal.prototype.eat = function() { console.log("Eating"); };

function Dog() { this.species = "dog"; }
Dog.prototype = new Animal(); // 继承Animal

const myDog = new Dog();
myDog.eat(); // Eating

登录后复制

缺点：所有实例共享父类实例属性，无法向父类构造函数传参。

2. 构造函数借用（经典组合继承）

function Animal(name) {
  this.name = name;
}
function Dog(name) {
  Animal.call(this, name); // 继承属性
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修正构造器引用

登录后复制

这种方式既继承了属性，又继承了方法，是较为推荐的做法。

3. ES6 class语法（语法糖）

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

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

登录后复制

class本质上仍是基于原型的，只是提供了更清晰的语法。