深入探讨 JavaScript 中的继承:实现继承的五种经典方式(附图解)

前言

  • 在 JavaScript 中,实现继承的几种常见方式包括:
    *

    1. 原型链继承: 此种方式也有两种方式
    • 1.1 共享同一个父类实例
    • 1.2 绕过父类实例,共享同一个类型原型
      1. 构造函数继承(借用构造函数)
      1. 组合继承
      1. 原型式继承
      1. ES6 类继承

原型链继承

原型链继承-共享同一个父类实例

这是 JavaScript 最早的继承方式,通过将子类的原型对象指向父类的实例,实现子类继承父类的属性和方法。但它有一个缺点,就是所有子类实例共享同一个父类实例。

js 复制代码
function Parent() {
  this.property = "parentProperty";
}

Parent.prototype.say = function () {
  console.log("Parent say");
};

function Child() {
  this.childProperty = "childProperty";
}

// 修改 Child 的 prototype 属性指向 Parent 实例对象,那么 Child 实例对象的 __proto__ 就会指向其构造函数 Child 的 prototype 属性(即Parent 实例对象)
// 修改了 Child.prototype 的指向后,那么原来 Child.prototype 指向的对象由于被没有引用,就会被回收。
Child.prototype = new Parent();

const childInstance = new Child();
console.log(childInstance.property); // 输出 'parentProperty'
childInstance.say();

下图是代码图解:

上面的代码看似没有问题,但其实还是存在缺陷:

js 复制代码
console.log(Child.prototype.constructor); // 输出:[Function: Parent], 即是 Parent 构造函数,这是由于 Child.prototype 自身没有,就会沿着 __proto__ 寻找,因此找到 Parent。这明显是不对的

console.log(Child.prototype.constructor === Child); // 输出:false, 这明显也是不对的

因此我们需要再修改 Child.prototype 的指向之后(即代码 Child.prototype = new Parent();),需要同时修改 Child.prototype.constructor 的指向:

diff 复制代码
Child.prototype = new Parent();
+Child.prototype.constructor = Child;
  • 后续代码也是同理!

原型链继承-绕过父类实例,共享同一个父类的原型

js 复制代码
function Parent() {
  this.property = "parentProperty";
}

Parent.prototype.say = function () {
  console.log("Parent say");
};

function Child() {
  Parent.call(this);
  this.childProperty = "childProperty";
}

// 方式一:直接指向
// Child.prototype.__proto__ = Parent.prototype;

// 方式二:使用 Object.create(),这是 es5 的方法
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

let childInstance = new Child();
console.log(childInstance.property);
childInstance.say();

下图是代码图解:

构造函数继承(借用构造函数)

这种方式通过在子类构造函数中调用父类构造函数,实现继承属性。这样每个子类实例都拥有独立的属性副本,但无法继承父类原型上的方法。

js 复制代码
function Parent() {
  this.property = "parentProperty";
}

Parent.prototype.say = function () {
  console.log("Parent say");
};

function Child() {
  Parent.call(this);
  this.childProperty = "childProperty";
}

const childInstance = new Child();
console.log(childInstance.property); // 输出 'parentProperty'
// childInstance.say() // 报错:childInstance.say is not a function

下图是代码图解:

组合继承

组合继承结合了原型链继承和构造函数继承,通过在子类构造函数中调用父类构造函数,然后设置子类的原型为一个父类实例,实现了既能继承属性又能继承方法。

js 复制代码
function Parent() {
  this.property = "parentProperty";
}

Parent.prototype.say = function () {
  console.log("Parent say");
};

function Child() {
  Parent.call(this);
  this.childProperty = "childProperty";
}

Child.prototype = new Parent();
// 注意:修改其原型对象之后,同时必须得修改 constructor 的指向
Child.prototype.constructor = Child;

const childInstance = new Child();
console.log(childInstance.property); // 输出 'parentProperty'
childInstance.say();

原型式继承

这种继承方式创建一个临时的构造函数,将这个构造函数的原型指向父构造函数的原型,再将子构造函数的原型指向该构造函数的实例,从而实现继承。

js 复制代码
function mockExtend(Parent, Child) {
  function Fn() {}

  /**
   * 1. 修改了 Fn.prototype 的指向后,那么原来的 Fn.prototype 没有被引用,则会被回收
   * 2. 那么Fn的实例对象的 __proto__ 就指向其构造函数的 prototype
   */
  Fn.prototype = Parent.prototype;

  Child.prototype = new Fn();
  // 注意:修改了原型对象之后,同时必须得修改 constructor 的指向
  Child.prototype.constructor = Child;
}

// =============================== 使用 ==================================
function Parent() {
  this.property = "parentProperty";
}

Parent.prototype.say = function () {
  console.log("Parent say");
};

function Child() {
  Parent.call(this);
  this.childProperty = "childProperty";
}

mockExtend(Parent, Child);

const childInstance = new Child();
console.log(childInstance.property);
childInstance.say();

下图是代码图解:

ES6 类继承

ES6 引入了 class 关键字,使继承更加易读和易用。通过 extends 关键字,一个类可以继承另一个类的属性和方法。

js 复制代码
class Parent {
  constructor() {
    this.property = "parentProperty";
  }

  say() {
    console.log("Parent say");
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.childProperty = "childProperty";
  }
}

const childInstance = new Child();
console.log(childInstance.property); // 输出 'parentProperty'
childInstance.say();
相关推荐
妮妮喔妮35 分钟前
图片上传 el+node后端+数据库
javascript·数据库·vue.js
求知若渴,虚心若愚。4 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj4 小时前
最新的前端技术和趋势(2025)
前端
一只小风华~5 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟6 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
仰望星空的凡人6 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus7 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉7 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A7 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6667 小时前
React与Rudex的合奏
前端·react.js·前端框架