ES5和ES6的继承
(1)ES5
// 构造函数
function Person(name) {
this.name = name
}
// 原型
Person.prototype.say = function () {
console.log('我是' + this.name)
}
// 子类构造函数继承父类构造函数
function Son(name, age) {
// 调用父类构造函数,让父类中的this指向当前子类
Person.call(this, name)
// 添加子类自己的属性
this.age = age
}
// 子类的原型继承父类的原型,让子类的原型指向父类实例化的对象
Son.prototype = new Person()
//添加子类自己的方法
Son.prototype.run = function () {
console.log('我今年xxx' + this.age)
}
// 通过子类实例化对象
var p1 = new Son('xin', 18)
console.log(p1)
p1.say()
(2)ES6
class Person {
// 构造函数,在实例化对象的时候,自动调用
constructor(name) {
this.name = name
}
// 添加在原型对象
say() {
console.log('我是' + this.name)
}
}
// 子类继承父类
class Son extends Person {
constructor(name, age) {
// 继承父类构造函数
super(name)
// 添加子类属性
this.age = age
}
// 父类的原型会自动的继承
// 添加子类的方法
run() {
console.log('xxx' + this.age)
}
}
// 通过子类实例化对象
const p1 = new Son('xin', 18)
console.log(p1)
分类:
十、前端面试 / 前端面试集合
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律