当前位置: 首页 > news >正文

JavaScript 中的继承

在网课中,老师着重讲解了原型继承,而在javaScript里面还有其他几种不同的继承方式,我们今天在这里拓展一下

1. 原型继承

这是最基本的继承方式,通过让子类的原型对象指向父类的实例来实现继承。

这种方法的缺点:所有子类实例共享同一个父类实例的属性,创建子类实例时无法向父类构造函数传参

​
​
function Person() {this.eye = 2this.head = 1}function Woman() {}Woman.prototype = new Person()Woman.prototype.constructor = WomanWoman.prototype.baby = function () {console.log('baby');}const womans = new Woman()console.log(womans);function Man() {}Man.prototype = new Person()Man.prototype.constructor = Manconst mans = new Man()console.log(mans);​​

2. 构造函数继承(经典继承)

通过在子类构造函数中调用父类构造函数来实现继承。

优点:可以向父类构造函数传递参数,避免了引用类型属性被所有实例共享

缺点:无法继承父类原型上的方法和属性

 function Person() {this.eye = 2this.head = 1}function Woman() {}Woman.prototype = new Person()Woman.prototype.constructor = WomanWoman.prototype.baby = function () {console.log('baby');}const womans = new Woman()console.log(womans);function Man() {}Man.prototype = new Person()Man.prototype.constructor = Manconst mans = new Man()console.log(mans);

3. 组合继承(最常用)

结合原型链继承和构造函数继承的优点。

优点:可以继承父类实例属性和原型属性;可以向父类构造函数传递参数;每个新实例引入的构造函数属性是私有的

缺点:调用了两次父类构造函数

function Parent(name) {this.name = name;
}Parent.prototype.sayName = function() {console.log(this.name);
};function Child(name, age) {Parent.call(this, name); // 第二次调用 Parentthis.age = age;
}Child.prototype = new Parent(); // 第一次调用 Parent
Child.prototype.constructor = Child;const child = new Child('Tom', 10);
child.sayName(); // "Tom"

4. 原型式继承

基于已有对象创建新对象

function createObj(o) {function F() {}F.prototype = o;return new F();
}const parent = {name: 'Parent',sayName: function() {console.log(this.name);}
};const child = createObj(parent);
child.name = 'Child';
child.sayName(); // "Child"

5. ES6 类继承

ES6 引入了 class 语法糖,使继承更加清晰。ES6 的类继承实际上是语法糖,底层仍然是基于原型链的实现。

class Parent {constructor(name) {this.name = name;}sayName() {console.log(this.name);}
}class Child extends Parent {constructor(name, age) {super(name); // 调用父类的constructorthis.age = age;}sayAge() {console.log(this.age);}
}const child = new Child('Tom', 10);
child.sayName(); // "Tom"
child.sayAge(); // 10

http://www.lryc.cn/news/593620.html

相关文章:

  • ADC选型设计
  • OpenCV 官翻 4 - 相机标定与三维重建
  • (LeetCode 每日一题) 1233. 删除子文件夹 (排序)
  • 数据集下载网站
  • aosp15上SurfaceFlinger的dump部分新特性-无Layer相关详细信息输出如何解决?
  • 基于Electron打包jar成Windows应用程序
  • 【2025/07/19】GitHub 今日热门项目
  • 【逻辑回归】MAP - Charting Student Math Misunderstandings
  • 2023 年 5 月青少年软编等考 C 语言八级真题解析
  • [故障诊断方向]基于二维时频图像和数据增强技术的轴承故障诊断模型
  • [黑马头条]-基于MinIO存储文章详情
  • 代码随想录算法训练营第二十五天
  • Streamlit 官翻 3 - 开发教程 Develop Tutorials
  • 80、【OS】【Nuttx】【启动】caller-saved 和 callee-saved 示例:栈空间对齐
  • Input输入和Screen相关
  • 轻松学习C++:基本语法解析
  • 从丢包到恢复:TCP重传机制的底层逻辑全解
  • 将HTML+JS+CSS数独游戏包装为安卓App
  • 微服务学习(六)之分布式事务
  • 华为擎云L420安装LocalSend
  • Java大视界:Java大数据在智能医疗电子健康档案数据挖掘与健康服务创新>
  • kafka--基础知识点--6.1--LEO、HW、LW
  • LeetCode Hot100【7. 整数反转】
  • 创意 C++ 文本冒险战斗游戏代码
  • Uniapp之自定义图片预览
  • 下一场范式革命:Transformer架构≠最终解法
  • Spring IOC容器在Web环境中是如何启动的(源码级剖析)?
  • Java多线程进阶
  • Node.js net.Socket.destroy()深入解析
  • [spring6: AspectMetadata AspectInstanceFactory]-源码解析