ES5和ES6的继承

发布时间 2023-06-21 16:22:23作者: 有只小菜猫

(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)