面向对象之ES6中的类和继承"/>
JavaScript面向对象之ES6中的类和继承
先回忆下前两天我们写的继承方法
function Person(name, hobby) {this.name = namethis.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 = namethis.hobby = hobby}doSth(){console.log(`${this.name}正在陪小仙女`)}sayHobby(){console.log(`我的兴趣是${this.hobby}`)}
}
来ES6中的class也是函数类型,既然是函数类型就一定有prototype
我们分别观察一下他们的prototype
function Person(name, hobby) {this.name = namethis.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 = namethis.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面向对象系列文章目录
更多推荐
JavaScript面向对象之ES6中的类和继承
发布评论