JavaScript面向对象之ES6中的类和继承

先回忆下前两天我们写的继承方法

function Person(name, hobby) {
      this.name = name
      this.hobby = hobby
    }
    Person.prototype.doSth = function () {
      console.log(`${this.name}正在陪小仙女`);
    }
    Person.prototype.sayHobby= function () {
      console.log(`我的兴趣是${this.hobby}`);
    }

今天我们所讲的就是通过es6语法中class对以前写的继承做了优化，如果对class还不是很了解，可以看下阮一峰class的继承

class

新的class写法使对象原型的写法更加清晰，更像面向对象编程的写法，将上面的例子用ES6来写:

class PersonEs6(){
 constructor(name, hobby) {
        this.name = name
        this.hobby = hobby
      }
      doSth(){
        console.log(`${this.name}正在陪小仙女`)
      }
      sayHobby(){
        console.log(`我的兴趣是${this.hobby}`)
      }
}

来ES6中的class也是函数类型，既然是函数类型就一定有prototype
我们分别观察一下他们的prototype

function Person(name, hobby) {
      this.name = name
      this.hobby = hobby
    }
    Person.prototype.doSth = function () {
      console.log(`${this.name}正在陪小仙女`);
    }
    Person.prototype.sayHobby= function () {
      console.log(`我的兴趣是${this.hobby}`);
    }
    
 class PersonEs6 {
 constructor(name, hobby) {
        this.name = name
        this.hobby = hobby
      }
      doSth(){
        console.log(`${this.name}正在陪小仙女`)
      }
      sayHobby(){
        console.log(`我的兴趣是${this.hobby}`)
      }
}
console.log(Person.prototype)
console.log(PersonEs6.prototype)

输出：

可以看出构造函数中的prototype属性在ES6的class上继续存在，事实上，类的所有方法都定义在类的prototype属性上
我们通过类实例化一个对象

class PersonEs6 {
constructor(name,hobby) {
this.name = name;
this.hobby = hobby
}
doSth() {
console.log(`${this.name}正在陪小仙女`)
}
syaHobby() {
console.log(`我的名字是${this.name}`)
}
}

const LJJ = new PersonEs6("刘家军","敲代码")
console.log(LJJ)

输出:

name和hobby是LJJ的自身属性，（因为定义在this变量上），doSth()和sayName(),是原型对象上的属性，（因为定义在PersonEs6类上）
继续看代码测一下：

console.log(LJJ.hasOwnProperty('name')) // true
console.log(LJJ.hasOwnProperty('hobby')) // true
console.log(LJJ.hasOwnProperty('doSth')) .// false
console.log(LJJ.hasOwnProperty('sayHobby')) // fasle

Object的hasOwnProperty()方法如果忘记了，可以看下我以前写JavaScript原型和原型链时关于Object的hasOwnProperty()方法的文章
class继承
上面初步了解了下class，现在我们开始讲class的继承
Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多
废话不多说,继续贴代码

class Person {
constructor(name,hobby) {
this.name = name;
this.hobby = hobby
}
doSth() {
return `${this.name}正在陪小仙女`
}
sayHobby() {
return `我的兴趣是${this.hobby}`
}
}

class Ljj extends Person {
constructor(name,hobby,privates){
super(name,hobby)
this.privates = privates
}
doSth(){
return `${this.privates}:${super.doSth()}`
}
}

const LJJ = new Ljj("刘家军","敲代码","私有的")
console.log(LJJ)
console.log(LJJ.doSth())
console.log(LJJ.sayHobby())

输出：

我们先定义了一个类Person， 我们把它称为父类，
然后又定义了个类Ljj，我们 把它称为子类，该类通过extends关键字，继承了Person类的所有属性和方法

如果子类没有定义constructor方法，这个方法会被默认添加，如果手动添加了constructor方法，就一定要调用super方法，否则新建实例时会报错，调用了super后才能使用this关键字
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
关于super的具体用法具体看 阮一峰super关键字

友情链接：点击查看所有文章目录

友情链接：点击查看　JavaScript面向对象系列文章目录