当前位置：首页 > JavaScript

实现一个js原型继承

2026-01-31 09:50:18JavaScript

原型继承的基本概念

在JavaScript中，每个对象都有一个内部属性[[Prototype]]，指向另一个对象或null。通过原型链，对象可以访问其原型上的属性和方法。

构造函数模式

定义一个构造函数，通过new关键字创建实例，实例的[[Prototype]]会指向构造函数的prototype属性。

实现一个js原型继承

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};

const animal = new Animal('Dog');
animal.speak(); // Dog makes a noise.

原型链继承

通过将子类的prototype指向父类的实例，实现继承。

实现一个js原型继承

function Dog(name) {
  Animal.call(this, name); // 调用父类构造函数
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复构造函数指向

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
};

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

ES6的`class`语法

使用class和extends关键字简化原型继承。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

`Object.create`实现纯净继承

直接基于现有对象创建新对象，无需构造函数。

const animal = {
  init(name) {
    this.name = name;
  },
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
};

const dog = Object.create(animal);
dog.init('Rex');
dog.speak = function() {
  console.log(`${this.name} barks.`);
};

dog.speak(); // Rex barks.