当前位置:首页 > JavaScript

js继承实现

2026-03-13 19:06:37JavaScript

原型链继承

通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。

function Parent() {
  this.name = 'parent';
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child() {}
Child.prototype = new Parent();

const child = new Child();
child.sayName(); // 'parent'

缺点:父类引用类型属性会被所有子类实例共享,无法向父类构造函数传参。

构造函数继承

在子类构造函数中调用父类构造函数,使用call或apply方法改变this指向。

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

function Child(name) {
  Parent.call(this, name);
}

const child = new Child('child');
console.log(child.name); // 'child'

优点:解决了原型链继承的缺点,可以向父类传参且引用属性不共享。缺点:无法继承父类原型上的方法。

组合继承

结合原型链继承和构造函数继承,既调用父类构造函数又设置子类原型为父类实例。

function Parent(name) {
  this.name = name;
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name) {
  Parent.call(this, name);
}
Child.prototype = new Parent();

const child = new Child('child');
child.sayName(); // 'child'

优点:结合两种模式的优点。缺点:父类构造函数被调用两次,子类原型上有多余的父类属性。

原型式继承

基于已有对象创建新对象,使用Object.create()方法实现。

const parent = {
  name: 'parent',
  sayName: function() {
    console.log(this.name);
  }
};

const child = Object.create(parent);
child.name = 'child';
child.sayName(); // 'child'

适用于不需要单独构造函数但需要对象间共享信息的场景。

寄生式继承

在原型式继承基础上增强对象,添加额外方法。

function createAnother(original) {
  const clone = Object.create(original);
  clone.sayHi = function() {
    console.log('hi');
  };
  return clone;
}

const parent = {
  name: 'parent'
};
const child = createAnother(parent);
child.sayHi(); // 'hi'

寄生组合式继承

最理想的继承方式,通过借用构造函数继承属性,通过原型链混成形式继承方法。

function inheritPrototype(child, parent) {
  const prototype = Object.create(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function Parent(name) {
  this.name = name;
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name) {
  Parent.call(this, name);
}
inheritPrototype(Child, Parent);

const child = new Child('child');
child.sayName(); // 'child'

优点:只调用一次父类构造函数,避免在子类原型上创建多余属性,原型链保持不变。

ES6 class继承

使用extends关键字实现继承,语法更简洁。

js继承实现

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name) {
    super(name);
  }
}

const child = new Child('child');
child.sayName(); // 'child'

底层实现仍然是基于原型链,但语法更接近传统面向对象语言。支持super调用父类方法。

标签: js
分享给朋友:

相关文章

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js实现报表

js实现报表

使用JavaScript实现报表 在JavaScript中实现报表功能可以通过多种方式完成,常见的方法包括使用原生JavaScript、第三方库(如Chart.js、D3.js)或结合后端数据渲染。以…

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…

js实现搜索

js实现搜索

实现搜索功能的方法 在JavaScript中实现搜索功能可以通过多种方式完成,以下是几种常见的实现方法。 使用数组的filter方法 通过数组的filter方法可以筛选出符合条件的数据项。假设有一个…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…