JavaScript Es5继承以及Es6继承
2021/9/23 20:11:28
本文主要是介绍JavaScript Es5继承以及Es6继承,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Es5之前常用的三种继承
Es5继承
原型链继承
//原型链继承 //把父类的实力属性赋值给子类原型 , 就叫做原型链继承 //父类 function Fu(name) { this.name = name this.sleep = function () { console.log(this.name + "会飞"); } } Fu.prototype.eat = function () { console.log(this.name + "会跑"); } //子类 function Zi() { } //子类继承父类 Zi.prototype = new Fu('小明') let one = new Zi one.sleep() one.eat() console.log(one.name);
构造函数继承
//父类 function Fu(name) { this.name = name this.sleep = function () { console.log(this.name + "会飞"); } } Fu.prototype.eat = function(){ console.log(this.name+"会跑"); // } //子类 function Zi(name){ Fu.call(this,name) } let one = new Zi('构造函数继承') console.log(one.name); one.sleep() //one.eat() // 报错 es5继承.html:102 Uncaught TypeError: one.eat is not a functionat
组合式继承
// 组合式继承 //原型链继承和构造函数继承的结合 //优点 : 可以传参 可以继承原型上的实例属性 // 父类 function Fu(name) { this.name = name this.sleep = function () { console.log(this.name + "会飞"); } } Fu.prototype.eat = function () { console.log(this.name + "会跑"); // } //子类 function Zi(name){ Fu.call(this,name) } Zi.prototype=new Fu() //修改constructor指针 Zi.prototype.constructor=Zi let one = new Zi('组合式继承') console.log(one.name); one.eat() one.sleep()
Es6继承
class类
//es6的 class类 语法糖 class Fu { constructor(name = "王", age = "18") { this.name = name this.age = age } eat() { console.log(`${this.name} ${this.age} eat food`); } } //继承父类 class Zi extends Fu { constructor(name = "人", age = "20") { //继承父类属性 super(name, age) //super指的是父亲的超集 people.call(this) } eat(){ //继承父类方法 super.eat() } } let ZiObj = new Zi('嘻嘻嘻') ZiObj.eat() console.log(ZiObj.name);
这篇关于JavaScript Es5继承以及Es6继承的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?