当前位置:首页 > JavaScript

js实现继承怎么实现

2026-03-14 21:49:00JavaScript

原型链继承

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

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'

组合继承

结合原型链继承和构造函数继承,既能继承实例属性又能继承原型方法。缺点是父类构造函数被调用两次。

js实现继承怎么实现

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'

寄生式继承

在原型式继承基础上增强对象,添加额外方法。适合主要关注对象而不是类型和构造函数的场景。

js实现继承怎么实现

function createChild(parent) {
  const child = Object.create(parent);
  child.sayHello = function() {
    console.log('hello');
  };
  return child;
}

const parent = { name: 'parent' };
const child = createChild(parent);
child.sayHello();

寄生组合式继承

目前最理想的继承方式,通过寄生式继承来继承父类原型,避免了组合继承中调用两次父类构造函数的问题。

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语法实现继承,语法更简洁清晰。底层实现仍然是基于原型链。

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'

标签: js
分享给朋友:

相关文章

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

js实现计算器

js实现计算器

实现基础计算器功能 使用JavaScript创建一个基础计算器需要处理数字输入、运算符逻辑和结果显示。以下是一个简单的实现示例: let currentInput = '0'; let previo…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 // 获取所有…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(f…