这次我们来讲解一下关于ES6类以及继承操作，在此之前，我们先来说一下关于ES5是如何实现类以及类的继承的吧
废话不多说，上代码
一：ES5的构造函数
function Person(name,age){
//构造函数里面的方法和实例
this.name = name
this.age = age
this.run = function () {
console.log(`${this.name}---${this.age}`)
}
}
这是一个基本的构造函数，run是这个构造函数内的一个方法
注意：Person类的原型链上也有一方法work()
Person.prototype.sex= '男'
Person.prototype.work = function () {
console.log(`${this.name}---${this.sex}`);
}
实例化这个构造函数并调用
var p = new Person('zhangsasn',20)
p.run(); //张三---20
p.work(); //张三---男
结论：原型链上面的属性和方法通过被多个实例共享
另外ES5中静态方法不需要经过实例化
直接：
Person.setName = function () {
console.log('静态方法')
}
//执行静态方法 不需要实例化
Person.setName(); //静态方法
二：ES5中的继承
在ES5的我使用的继承是对象冒充实现继承以及原型链继承相结合
至于为什么要相结合呢？
同样是这个例子
function Person(name,age){
this.name = name
this.age = age
this.run = function () {
console.log(`${this.name}---${this.age}`)
}
}
我只实现对象冒充继承
function Web(name,age){
Person.call(this,name,age) //对象冒充实现继承
}
这样做有一个缺点：无法继承原型链上属性和方法
比如：
Person.prototype.work = function () {
console.log('work')//原型链上的实例方法
}
var w = new Web()
w.work() //undefined
同理我只实现原型链继承
Web.prototype = new Person(); //原型链继承
var w = new Web('李四',20)
w.run(); //undefined---undefined
结论：无法把Web子类实例化后的参数传入Person类里面
下面我们正式说一下ES6类的实现
class Person{
constructor(name,age){
this._name = name
this._age = age
}
getName(){
console.log(this._name)
}
setName(name){
this._name = name
}
}
var p = new Person('张三1','20')
p.getName() //张三1
p.setName('李四')
p.getName() //李四
这里大家都能看懂吧 不懂的就要回去翻阅一下阮一峰大神的ES6教程
下面就是ES6中的继承
class Person{
constructor(name,age){
this.name = name
this.age = age
}
getInfo(){
console.log(`姓名:${this.name}年龄:${this.age}`);
}
run(){
console.log('run')
}
}
使用extends关键字实现继承
class Web extends Person {
constructor(name,age,sex){
super(name,age) //实例化Web子类的时候把子类的参数传给父类Person
this.sex = sex
}
print(){
console.log(this.sex)
}
}
var w = new Web('张三','30','男')
w.print() //男
w.getInfo() //姓名:张三年龄:30
如果想在ES6类中定义的静态方法
class Person{
constructor(name){
this._name = name
}
run(){ //实例方法
console.log(this._name)
}
static work(){ //静态方法
console.log('这是es6里面的静态方法')
//静态方法无法读取类的属性以及方法
console.log(this._name) //undefined
}
}
