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

ES5中实现继承

  本篇文章主要说明在ES5中最通用最兼容的继承实现方式,继承作为面向对象的三大特性之一,在js中实现继承对代码的简洁性,逻辑的连贯性都有很大的帮助。

实现思路

封装创建中间联系对象的函数

  继承可以简单理解为建立子类和父类之间的联系,从而实现代码和函数的复用,建立子类和父类的联系,也就是建立两个构造函数之间的联系,我们不难想到可以通过原型,原型链来实现,让子类与父类的原型建立联系,就可以达到我们的目的。

  如果我们直接将子类的prototype属性指向父类的原型的话,就会导致继承很多我们并不需要的属性,所以我们通过下图这种方式:

  将创建中间建立联系对象的代码封装成为一个函数,传入的参数p为父类的原型对象,将p赋值给F的原型,并将其实例返回。

封装继承函数

  接下来,我们将createObj返回的实例对象赋值给子类的原型,建立父类和子类的联系,也就是继承关系,实现代码如下图:

  封装成继承函数,将子类和父类作为参数传入,将子类的prototype指向createObj函数返回的实例对象,并在子类原型中添加constructor属性,指向子类的构造函数对象,在需要继承的位置,直接调用inherit函数就能完成继承。

完整代码

function Person(name, age) {this.name = name;this.age = age;
};Person.prototype.work = function() {console.log("撸起袖子加油干")
}function Children(name, age, responsibility) {Person.call(this, name, age);this.responsibility = responsibility;
};function createObj(p) {function F() {};F.prototype = p;return new F()
}function inherit(Subtype, Supertype) {Subtype.prototype = createObj(Supertype.prototype);Object.defineProperty(Subtype.prototype, 'constructor', {enumerable: false,configurable: true,writable: true,value: Subtype})
}inherit(Children, Person);Children.prototype.study = function() {console.log("学习");
}var child = new Children("guanju", 18, "成家立业");
console.log(child);
child.study();
child.work();

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

相关文章:

  • 面试鸭 - 专注于面试刷题的网站
  • 解决小程序路由超过10层限制
  • 【ceph】AI时代-数据为王-ceph存储将成为未来比较看好的赛道之一,为什么不all in一把学习一个不那么卷的赛道呢?
  • 《小·意·思》特殊符号
  • Web server failed to start. Port 8080 was already in use.
  • 蓝桥杯第三周算法竞赛D题E题
  • 国家大基金三期线上金融正式倒计时!11月17日,共启芯片产业新篇章
  • Chrony让内网设备时间同步
  • 在docker中部署MySQL
  • 百家网约车平台发布“阳光五条” 多举措加强司机保障
  • JXLS 导出多sheet,带页眉页脚
  • docker数据卷详细讲解及数据卷常用命令
  • 智能井盖传感器能不能监测井盖位移
  • .bashrc文件中环境变量配置错误,导致linux命令无法正常使用
  • HTML易忽略的角落【目录】
  • mysql8.0递归
  • 处理机器学习数据集中字符串列(pandas.get_dummies)
  • 一个UE无法注册的问题
  • 自媒体剪辑必备,6个音效素材网站,你值得拥有。
  • uniapp Android如何授权打开系统蓝牙Bluetooth?
  • 图论与网络优化2
  • ES Kibana windows 安装
  • 分布式事务seata的使用
  • 使用宝塔面板安装mysql
  • Flink 支持三种时间语义
  • 【大话Presto 】- 核心概念
  • 阎良区公益创投之“小飞机大梦想” 航模DIY主题活动
  • springBoot集成websocket实时消息推送
  • web:[BUUCTF 2018]Online Tool
  • 决策树的Boosting策略是什么