位置: IT常识 - 正文

js实现继承属性和方法(js实现继承属性功能)

编辑:rootadmin
js实现继承属性和方法 js实现继承属性和方法1 使用extends实现继承2 原型链继承3 组合继承4 寄生组合继承5 实例继承6 拷贝继承7 扩展7.1 函数中方法定义在函数内部、函数外、prototype上的区别7.2 class创建实例与构造函数创建实例

推荐整理分享js实现继承属性和方法(js实现继承属性功能),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js继承几种方式,js实现继承属性功能,js继承的三种方法,js继承如何实现,js 继承实现,js继承的三种方法,js继承的三种方法,js继承几种方式,内容如对您有帮助,希望把文章链接给更多的朋友!

首先定义一个父类

function Animal (name, age) { this.name = name this.age = age this.eat = function () { console.log('吃', this.name, this.age) }}Animal.prototype.drink = function () { console.log('喝', this.name, this.age)}// 实验一下const test = new Animal('狗', 3)test.eat()test.drink()console.log(test)

运行结果

1 使用extends实现继承

最简便的继承方式,仅支持ES6+

class Dog extends Animal { constructor(name, age, breed) { super(name, age) this.breed = breed } cry () { console.log('叫', this.name, this.age, this.breed) }}// 实验一下 const dog = new Dog('狗', 3, '田园犬'); dog.eat() dog.drink() dog.cry() console.log(dog)

实验结果

2 原型链继承function Dog (name, age, breed) { Animal.call(this, name, age); this.breed = breed; this.cry = function () { console.log('叫', this.name, this.age, this.breed) }}Dog.prototype = new Animal()Dog.prototype.constructor = Dog// 实验一下const dog = new Dog('狗', 3, '田园犬');console.log(dog)dog.eat()dog.drink()dog.cry()js实现继承属性和方法(js实现继承属性功能)

实验结果

3 组合继承function Dog (name, age, breed) { Animal.call(this, name, age); this.breed = breed; this.cry = function () { console.log('叫', this.name, this.age, this.breed) }}Dog.prototype = Object.create(Animal.prototype)Dog.prototype.constructor = Dog// 实验一下const dog = new Dog('狗', 3, '田园犬');console.log(dog)dog.eat()dog.drink()dog.cry()

实验结果

4 寄生组合继承function Dog (name, age, breed) { Animal.call(this, name, age); this.breed = breed; this.cry = function () { console.log('叫', this.name, this.age, this.breed) }}(() => { let Super = function () { }; Super.prototype = Animal.prototype; Dog.prototype = new Super(); Dog.prototype.constructor = Dog;})();// 实验一下const dog = new Dog('狗', 3, '田园犬');console.log(dog)dog.eat()dog.drink()dog.cry()

实验结果

5 实例继承function Dog (name, age, breed) { let dog = new Animal(name, age); dog.breed = breed; dog.cry = function () { console.log('叫', this.name, this.age, this.breed) } return dog}// 实验一下const dog = new Dog('狗', 3, '田园犬');console.log(dog)dog.eat()dog.drink()dog.cry()

实验结果

6 拷贝继承function Dog (name, age, breed) { let animal = new Animal(name, age); for (let key in animal) { this[key] = animal[key] } this.breed = breed; this.cry = function () { console.log('叫', this.name, this.age, this.breed) }}// 实验一下const dog = new Dog('狗', 3, '田园犬');console.log(dog)dog.eat()dog.drink()dog.cry()

实验结果

7 扩展7.1 函数中方法定义在函数内部、函数外、prototype上的区别挂载在函数内部的方法,实例内部会复制构造函数的方法挂载在原型上的方法,不会去复制。挂载在内部和原型上的方法都是可以通过实例去调用的一般来说,如果需要访问构造函数内部的私有变量,我们可以定义在函数内部,其他情况我们可以定义在函数的原型上在函数外定义的方法,只能用类调用函数位置调用方式结果构造函数内函数名直接调用报错函数外函数名直接调用正常执行函数外 prototype上函数名直接调用报错构造函数内实例化对象调用正常执行函数外实例化对象调用报错函数外 prototype上实例化对象调用正常执行7.2 class创建实例与构造函数创建实例function exa1 (name, age) { this.name = name this.age = age this.innerFunc = function () { console.log('inner') } } exa1.prototype.outerFunc = function () { console.log('prototype') } exa1.getClassName = function () { console.log('example') } class exa2 { constructor(name, age) { this.name = name this.age = age } innerFunc = function () { console.log('inner') } outerFunc () { console.log('prototype') } static getClassName () { console.log('example') } } console.log(new exa1(), new exa2())

本文链接地址:https://www.jiuchutong.com/zhishi/299660.html 转载请保留说明!

上一篇:前端实战|React18项目启动——pc端极客园项目前置准备(前端实战培训)

下一篇:ChatGPT加强版GPT-4面世,打工人的方式将被颠覆(gpt3 plug)

  • 南京地铁可以用支付宝吗(南京地铁可以用京津冀一卡通吗)

    南京地铁可以用支付宝吗(南京地铁可以用京津冀一卡通吗)

  • 小米手机自动开关机怎么设置(小米手机自动开勿扰模式怎么回事)

    小米手机自动开关机怎么设置(小米手机自动开勿扰模式怎么回事)

  • 华硕电脑怎么进入安全模式(华硕电脑怎么进入修复模式)

    华硕电脑怎么进入安全模式(华硕电脑怎么进入修复模式)

  • vivo1913a是什么机型(vivov1913a是什么手机型号)

    vivo1913a是什么机型(vivov1913a是什么手机型号)

  • 华为mate30橙色是皮面吗

    华为mate30橙色是皮面吗

  • 苹果11充电发烫(苹果11充电发烫会爆炸吗)

    苹果11充电发烫(苹果11充电发烫会爆炸吗)

  • 抖音被限流如何快速恢复(抖音限流如何查看)

    抖音被限流如何快速恢复(抖音限流如何查看)

  • 探探解除匹配在喜欢的人里面还能找到吗(探探解除匹配在哪里恢复)

    探探解除匹配在喜欢的人里面还能找到吗(探探解除匹配在哪里恢复)

  • 手机不能拍照打开相机是黑屏怎么办(手机不能拍照打开相机是黑屏怎么办小米)

    手机不能拍照打开相机是黑屏怎么办(手机不能拍照打开相机是黑屏怎么办小米)

  • 华为不支持车载usb(华为手机支不支持车载carplay)

    华为不支持车载usb(华为手机支不支持车载carplay)

  • 5g手机用4g卡网速高吗(5g手机用4g卡网速会变快吗)

    5g手机用4g卡网速高吗(5g手机用4g卡网速会变快吗)

  • 微信号什么时候可以修改第二次(微信号什么时候能改)

    微信号什么时候可以修改第二次(微信号什么时候能改)

  • 文件许可权错误无法保存什么原因(文件许可权错误是什么意思)

    文件许可权错误无法保存什么原因(文件许可权错误是什么意思)

  • 全屏截图快捷键ctrl加什么(如何全屏截图快捷键)

    全屏截图快捷键ctrl加什么(如何全屏截图快捷键)

  • 下载的软件一重启就没了(软件下载一半重新下载是什么原因)

    下载的软件一重启就没了(软件下载一半重新下载是什么原因)

  • 小米电话录音保存在哪(小米电话录音保存多久)

    小米电话录音保存在哪(小米电话录音保存多久)

  • vivo深色模式的作用(vivo手机深色模式在哪里)

    vivo深色模式的作用(vivo手机深色模式在哪里)

  • 朋友圈怎么设置陌生人不可见(朋友圈怎么设置三天)

    朋友圈怎么设置陌生人不可见(朋友圈怎么设置三天)

  • ipad用手机卡上网吗(ipad用手机卡上网慢怎么办)

    ipad用手机卡上网吗(ipad用手机卡上网慢怎么办)

  • matebook magicbook区别

    matebook magicbook区别

  • 蓝牙耳机红蓝交替闪烁怎么回事(蓝牙耳机红蓝交替闪烁是什么状态)

    蓝牙耳机红蓝交替闪烁怎么回事(蓝牙耳机红蓝交替闪烁是什么状态)

  • 如何恢复qq的重要数据(如何恢复qq的重命名文件)

    如何恢复qq的重要数据(如何恢复qq的重命名文件)

  • flash按钮跳转场景(flash按钮跳转场景怎么做)

    flash按钮跳转场景(flash按钮跳转场景怎么做)

  • 蓝牙耳机消除电流音(蓝牙耳机低电量报警怎么关闭)

    蓝牙耳机消除电流音(蓝牙耳机低电量报警怎么关闭)

  • 预缴税款计算公式
  • 待认证进项税额是什么情况下用的
  • 小规模纳税人广联达怎么取费怎么取
  • 建筑服务预征缴纳税款包括附加税吗
  • 公司车维修费
  • 企业所得税季度申报表A类
  • 银行询证函快递怎么查
  • 公司打到个人账户需要多久
  • 企业为什么产生
  • 出纳单据交接表怎么填写
  • 以个人名义开的发票
  • 公允价值变动损益和投资收益区别
  • 怎么算应纳税收多少
  • 职工教育经费税收金额怎么算
  • 购买商品加包装后出售账务处理
  • 公司租金收入交多少税
  • 医院减免医药费后还可以报保险吗
  • 开发成本可以计增值税吗
  • 职工培训费进项能抵扣吗
  • 当月取得的进项必须当月勾选吗
  • 委托代理合同后果的承担
  • 小微企业免征增值税条件
  • 纳税人跨县(市、区)提供建筑服务
  • 长期股权投资年度损益影响金额包括什么
  • 资本公积转增股本会计处理
  • 企业公户转别的公司公户他不给开发票怎么操作?
  • 民间非营利组织会计制度最新版
  • 临时设施需要验收吗
  • 滴滴出行电子发票备注怎么写
  • 股份支付的会计处理?
  • 股利如何算
  • 老毛桃u盘启动盘制作工具怎么安装win10系统 老毛桃u盘安装win10系统图文教程
  • 用优启通怎么装系统
  • 域名停靠是病毒吗
  • cuda completed with errors
  • 权益法下长期股权投资超额亏损
  • 电子发票记账清单入账
  • 电子发票重开之前的是不是就没用了
  • php快速排序非递归
  • 企业注销亏损怎么处理
  • 电子商业汇票线下清算流程
  • 机械设备大修标准
  • 美元利息结汇是属于外汇
  • 销售产品的运输费会计分录
  • 进项大于销项的会计分录怎么做?
  • 转让财产损失是什么科目
  • 一般纳税人条件要求2020
  • 房产税的政策依据
  • 现金流量表编制实操
  • 劳务公司的成本有哪些
  • 没收到发票也可以入账吗
  • 公司成立前购买的固定资产
  • 福利部门的福利有哪些
  • 汇算清缴工资调减怎么做账
  • 生物性资产折旧处理
  • 年数总和法计提折旧的例题
  • mssql server .ldf和.mdf的文件附加数据库的sql语句
  • SQL 导入导出Excel数据的语句
  • winxp搜索文件内容搜不出来
  • linux快速清空大日志文件
  • fedora系统怎么安装
  • 如何架设ftp
  • windows10x预览版
  • linux readelf命令
  • windows定时关机计划
  • redis-stat监控
  • 怎么看win8还是win10
  • linux保存配置文件
  • win7系统电脑怎么开热点
  • windows10 2021预览版
  • opengl教学视频
  • js组件是什么
  • Node.js中的construct构造函数
  • 安卓手机界面设计
  • js代码怎么使用
  • js能实现的简单效果
  • jquery上传文件到服务器
  • javascript ref
  • 北京地税残疾人补贴政策
  • 公共基础设施项目所得税优惠目录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设