当前位置:首页 > JavaScript

js继承如何实现的

2026-01-30 09:50:25JavaScript

继承的实现方式

JavaScript 中的继承主要通过原型链实现,以下是几种常见的继承方式:

原型链继承

通过将子类的原型指向父类的实例实现继承:

function Parent() {
  this.name = 'parent';
}
Parent.prototype.getName = function() {
  return this.name;
};

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

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

构造函数继承

在子类构造函数中调用父类构造函数:

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.getName = function() {
  return this.name;
};

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

const child = new Child('child', 10);
console.log(child.getName()); // 'child'

原型式继承

基于已有对象创建新对象:

const parent = {
  name: 'parent',
  getName: function() {
    return this.name;
  }
};

const child = Object.create(parent);
child.name = 'child';
console.log(child.getName()); // 'child'

寄生式继承

在原型式继承基础上增强对象:

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(); // 'Hello'

寄生组合式继承

最理想的继承方式:

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

function Parent(name) {
  this.name = name;
}
Parent.prototype.getName = function() {
  return this.name;
};

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

const child = new Child('child', 10);
console.log(child.getName()); // 'child'

ES6类继承

使用class和extends语法:

js继承如何实现的

class Parent {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

const child = new Child('child', 10);
console.log(child.getName()); // 'child'

每种继承方式都有其适用场景和优缺点,实际开发中应根据需求选择合适的继承方式。ES6类继承是目前最简洁和推荐的方式。

标签: 如何实现js
分享给朋友:

相关文章

vue如何实现冒泡

vue如何实现冒泡

Vue 实现冒泡排序 在 Vue 中实现冒泡排序,可以通过数据绑定和响应式特性动态展示排序过程。以下是一个完整的实现示例,包含代码和详细说明。 数据准备 在 Vue 的 data 中定义一个数组作为…

如何实现vue表格联动

如何实现vue表格联动

实现Vue表格联动的方法 使用Vue的响应式数据和计算属性 通过Vue的响应式数据特性,可以轻松实现表格之间的联动。定义一个共享的数据源,并在多个表格组件中使用这个数据源。利用计算属性对数据进行处理,…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现防洪

js实现防洪

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

js实现目录

js实现目录

实现目录的基本思路 在JavaScript中实现目录功能通常涉及以下几个核心步骤:解析文档中的标题元素(如h1-h6),动态生成目录结构,并添加交互逻辑(如点击跳转)。以下是具体实现方法: 解析标题…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 c…