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

JS中的继承

在js中,es6之前是没有类的,类的概念是从es6开始提出来的. 所以JS中的继承应该理解为原型链继承.

js的继承就是由原型链作为实现继承的主要方法. 每一个构造函数都拥有一个原型对象,基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法.或者说,js中的一个子类别继承自父类别,便使得子类具有了父类的各种属性和方法.

JS继承的方式

分别说一下经典的prototype 继承,和 ES6的class继承.

1. 原型链继承

基本原理就是将一个构造函数的原型对象赋值给另一个的实例

 function Parent(name){
     this.name=name
     this.genter='男'
 }
 //声明一个原型链上面的属性
 Parent.prototype.sayname=function(){
     console.log('你的身份是'+this.name)
     
 }
 function Child(name){
     this.name=name
 }
 
 Child.prototype=new Parent('爸爸')//这里就是继承了Parent的属性方法
 
 var child=new Child('儿子')
 
 child.sayname() //'你的身份是儿子'
复制代码

2. 类式继承

  function Parent(name){
     this.name=name
 }
 
 Parent.prototype.sayname=function(){
     console.log('你的身份是'+this.name)
 }
 function Child(name){
     Parent.call(this,name)
 }
 Child.prototype.__proto__=Parent.prototype  //这一句就实现了继承,Child拥有了sayname方法
 var child=new Child('宝宝')
 console.log(child)
复制代码

缺点:会继承父类的一些不必要的属性,比如说genter属性,我们不需要知道.

解决方法:

f=function(){}
f.prototype=Parent.prototype
Child.prototype=new f()
复制代码

es6 的写法

class Parent {
    constructor(name){
        this.name=name
    }
    sayname(){
        console.log('你的身份是'+this.name)
    }
}

class Child extends Parent{
    constructor(name){
        super(name)
    }
    get age(){
        return '21'
    }
}
var child =new Child('宝宝')
child.sayname()//你的身份是宝宝
复制代码

缺点:不能在child.prototype上定义非函数的属性,

比如child.age 用传统ES5写法可以写为age:"21"在class 中只能用函数return出来.

转载于:https://juejin.im/post/5b89347851882528676a367e

相关文章:

  • MyBatis拦截器原理探究
  • 关于电脑使用习惯的若干看法
  • Docker与Tomcat:去掉项目名称进行访问
  • ab压力测试工具的简单使用
  • 一个开发两年的程序员面试总结
  • sigmoid函数求导
  • rhel7 IP地址配置,DNS配置,NetworkManager查看
  • Nosql介绍
  • UESTC - 1999 也许这是唯一能阻止乐爷AK的方法( Just for Fun )(回文树)
  • 语音和面部识别技术能帮助AI在情商上超越人类吗
  • 5分钟即可掌握的前端高效利器:JavaScript 策略模式
  • 皮尤调查:美国年轻用户正在远离Facebook平台
  • [湖南集训]谈笑风生(主席树)
  • Docker源码分析(六):Docker Daemon网络
  • 回归博客园~
  • #Java异常处理
  • 77. Combinations
  • canvas绘制圆角头像
  • DOM的那些事
  • IndexedDB
  • javascript 总结(常用工具类的封装)
  • k8s如何管理Pod
  • Linux各目录及每个目录的详细介绍
  • Making An Indicator With Pure CSS
  • opencv python Meanshift 和 Camshift
  • overflow: hidden IE7无效
  • PHP面试之三:MySQL数据库
  • Synchronized 关键字使用、底层原理、JDK1.6 之后的底层优化以及 和ReenTrantLock 的对比...
  • 从@property说起(二)当我们写下@property (nonatomic, weak) id obj时,我们究竟写了什么...
  • 浅谈Kotlin实战篇之自定义View图片圆角简单应用(一)
  • 算法---两个栈实现一个队列
  • 想使用 MongoDB ,你应该了解这8个方面!
  • AI算硅基生命吗,为什么?
  • ​TypeScript都不会用,也敢说会前端?
  • ​力扣解法汇总1802. 有界数组中指定下标处的最大值
  • (06)Hive——正则表达式
  • (06)金属布线——为半导体注入生命的连接
  • (Forward) Music Player: From UI Proposal to Code
  • (Matalb时序预测)PSO-BP粒子群算法优化BP神经网络的多维时序回归预测
  • (react踩过的坑)Antd Select(设置了labelInValue)在FormItem中initialValue的问题
  • (zz)子曾经曰过:先有司,赦小过,举贤才
  • (第27天)Oracle 数据泵转换分区表
  • (动手学习深度学习)第13章 计算机视觉---图像增广与微调
  • (附源码)springboot家庭财务分析系统 毕业设计641323
  • (九)c52学习之旅-定时器
  • (六)c52学习之旅-独立按键
  • (免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • (四)JPA - JQPL 实现增删改查
  • (未解决)jmeter报错之“请在微信客户端打开链接”
  • (一)u-boot-nand.bin的下载
  • (译)计算距离、方位和更多经纬度之间的点
  • (最简单,详细,直接上手)uniapp/vue中英文多语言切换
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • [bzoj4240] 有趣的家庭菜园