深入浅析javascript继承体系

2023-12-09前端开发
5

深入浅析JavaScript继承体系

1. 继承的概念

在JavaScript中,继承是指一个对象获得另一个对象的属性和方法。这种被继承的对象称为父类或基类,继承它的对象称为子类或派生类。继承是面向对象编程中最基本的概念之一,也是JavaScript中的重要概念。

2. 继承的实现方式

在JavaScript中,实现继承有多种方式,常见的包括原型链继承、构造函数继承、组合继承、寄生组合继承等。

2.1 原型链继承

原型链继承是指将父类的实例作为子类的原型。示例代码如下:

function Parent() {
  this.name = 'parent';
  this.age = 30;
}

Parent.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}.`);
}

function Child() {}

Child.prototype = new Parent();

var child = new Child();

console.log(child.name); // parent
console.log(child.age); // 30

child.sayHello(); // Hello, I'm undefined.

原型链继承的优点是简单、易于理解和实现,缺点是没法给父类构造函数传参,且由于所有子类对象共享父类原型对象的属性和方法,可能导致意外的修改。

2.2 构造函数继承

构造函数继承是指在子类的构造函数中调用父类的构造函数,并通过call或apply方法改变父类构造函数中this的引用。示例代码如下:

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

Parent.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}.`);
}

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

var child = new Child('child', 10);

console.log(child.name); // child
console.log(child.age); // 10

child.sayHello(); // TypeError: child.sayHello is not a function

构造函数继承的优点是可以给父类构造函数传参,可以避免意外的修改,缺点是无法直接继承父类原型对象中的属性和方法。

2.3 组合继承

组合继承是指通过原型链继承和构造函数继承两种方式结合的一种继承方式。示例代码如下:

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

Parent.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}.`);
}

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

Child.prototype = new Parent();

var child = new Child('child', 10);

console.log(child.name); // child
console.log(child.age); // 10

child.sayHello(); // Hello, I'm child.

组合继承的优点是综合了原型链继承和构造函数继承的优点,可以继承父类的属性和方法,可以给父类构造函数传参,避免了意外的修改。

2.4 寄生组合继承

寄生组合继承是对组合继承的一种优化,其核心是通过Object.create方法创建一个中间对象,使其作为子类原型对象,可以避免调用父类构造函数时产生的副作用。示例代码如下:

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

Parent.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}.`);
}

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

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

var child = new Child('child', 10);

console.log(child.name); // child
console.log(child.age); // 10

child.sayHello(); // Hello, I'm child.

寄生组合继承的优点是继承了父类的属性和方法,可以给父类构造函数传参,避免了意外的修改,在原型链上只存在一个中间对象,保证了代码的性能。

3. 结语

以上是JavaScript中常见的继承方式,每种方式都有其优缺点,根据实际需求选择适合的方式。在实际应用中,也有更复杂的继承方式,例如ES6中引入的class关键字,可以更方便地实现继承。

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

网站部署https后百度地图不显示问题
https的网站如果引用百度地图,会出现加载不了的问题,这是因为涉及到跨域问题,网站是https的,但是引用百度地图的是http的,这个要怎么操作呢? 比如我引用的地址:http://api.map.baidu.com/api?v=2.0ak=AK显示 后来看了一下,少了一个s=1字段,加一下s=1...
2025-07-28 前端开发
139

微信小程序实现点击复制功能和手机拨打电话功能
做小程序项目的时候,客户提了一个功能需求优化,就是长按文字需要复制全部内容,因为有的手机支持全选复制,有的手机不支持全选复制。 通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码: van-field value="{{form.contactPhone}}"...
2025-07-02 前端开发
78

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161