博客
关于我
js之继承
阅读量:198 次
发布时间:2019-02-28

本文共 1891 字,大约阅读时间需要 6 分钟。

什么是继承

继承是类与类之间的关系,其主要作用是使子类能够继承父类的属性和方法。通过继承,可以在子类中重复使用父类的功能,避免代码冗余。


继承的实现方式

继承的实现方式主要有四种:原型链继承、借用构造函数继承、组合继承以及原型式继承。每种方法都有其独特的特点和适用场景。

1. 原型链继承

原型链继承的核心思想是让新实例的原型等于父类的实例。这种方法通过重新赋值 prototype 属性来实现继承。

function Human(name) {    this.name = name;    this.eat = function() {        console.log('吃饭');    };}Human.prototype.run = function() {    console.log('我很能跑');};// 实现继承function Man(age) {    this.age = age;}Man.prototype = new Human('小王');// 创建实例let man = new Man('11');console.log(man.age); // 11console.log(man.name); // '小王'man.run(); // '我很能跑'let man2 = new Man('33');console.log(man2.age); // 33console.log(man2.name); // '小王'man2.run(); // '我很能跑'

优点

  • 实现了属性的共享,减少内存占用。

缺点

  • 新实例无法传递父类构造函数的参数。
  • 仅支持单一继承,无法实现多个接口的继承。

2. 借用构造函数继承

借用构造函数继承通过调用 callapply 方法,将父类的构造函数引入子类,从而实现继承。

function Man(name, age) {    Human.call(this, name);    this.age = age;}// 创建实例let man1 = new Man('小王', 12);console.log(man1.name); // '小王'console.log(man1.age); // 12man1.eat(); // '吃饭'let man2 = new Man('大王', 21);console.log(man2.name); // '大王'console.log(man2.age); // 21

优点

  • 可以传递构造函数的参数。

缺点

  • 每次创建实例都需要重新调用父类构造函数,导致内存占用增加。

3. 组合继承

组合继承结合了原型链继承和借用构造函数继承的优点,既能传递参数,又能继承原型链上的属性。

function Man(name, age) {    Human.call(this, name);    this.age = age;}Man.prototype = new Human();// 创建实例let man1 = new Man('小王', 12);console.log(man1.name); // '小王'console.log(man1.age); // 12man1.eat(); // '吃饭'man1.run(); // '我很能跑'let man2 = new Man('大王', 21);console.log(man2.name); // '大王'console.log(man2.age); // 21man2.run(); // '我很能跑'

优点

  • 允许传递构造函数的参数。
  • 维护原型链上的属性和方法。

缺点

  • 子类构造函数会覆盖原型链上的父类构造函数。

4. 原型式继承

原型式继承通过创建一个函数来包装对象,然后返回新对象,使其继承原型链上的属性。

function Man(obj) {    function F() {}    F.prototype = obj;    return new F();}// 创建实例let human = new Human('小');let man = Man(human);console.log(man.name); // '小'

优点

  • 适合需要频繁修改原型链属性的情况。

缺点

  • 每个实例都有独立的属性,无法实现构造函数的复用。

web前端技术交流QQ群:327814892

如果你对前端技术感兴趣,可以加入我们的交流群,和技术大牛一起探讨更多有趣的内容!

转载地址:http://ktri.baihongyu.com/

你可能感兴趣的文章
Nginx配置TCP代理指南
查看>>
Nginx配置——不记录指定文件类型日志
查看>>
Nginx配置代理解决本地html进行ajax请求接口跨域问题
查看>>
Nginx配置参数中文说明
查看>>
Nginx配置好ssl,但$_SERVER[‘HTTPS‘]取不到值
查看>>
Nginx配置如何一键生成
查看>>
Nginx配置实例-负载均衡实例:平均访问多台服务器
查看>>
NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表多表增量同步_增删改数据分发及删除数据实时同步_通过分页解决变更记录过大问题_02----大数据之Nifi工作笔记0054
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_实现数据插入数据到目标数据库_实际操作03---大数据之Nifi工作笔记0042
查看>>
NIFI同步MySql数据_到SqlServer_错误_驱动程序无法通过使用安全套接字层(SSL)加密与SQL Server_Navicat连接SqlServer---大数据之Nifi工作笔记0047
查看>>
Nifi同步过程中报错create_time字段找不到_实际目标表和源表中没有这个字段---大数据之Nifi工作笔记0066
查看>>
NIFI大数据进阶_离线同步MySql数据到HDFS_02_实际操作_splitjson处理器_puthdfs处理器_querydatabasetable处理器---大数据之Nifi工作笔记0030
查看>>
NIFI大数据进阶_连接与关系_设置数据流负载均衡_设置背压_设置展现弯曲_介绍以及实际操作---大数据之Nifi工作笔记0027
查看>>
NIFI汉化_替换logo_二次开发_Idea编译NIFI最新源码_详细过程记录_全解析_Maven编译NIFI避坑指南001---大数据之Nifi工作笔记0068
查看>>
NIFI集群_内存溢出_CPU占用100%修复_GC overhead limit exceeded_NIFI: out of memory error ---大数据之Nifi工作笔记0017
查看>>
NIH发布包含10600张CT图像数据库 为AI算法测试铺路
查看>>
NIO ByteBuffer实现原理
查看>>
Nio ByteBuffer组件读写指针切换原理与常用方法
查看>>
NIO Selector实现原理
查看>>
nio 中channel和buffer的基本使用
查看>>