☞☞ 个人主页欢迎访问 ☜☜
大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了模块化的用法,下面我们一起来继续学习类和继承:
关于类的概念我想大家都很熟悉了,在面向对象编程的时候需要用到类,那么ES5以及之前的写法来模拟类,这种做法很粗糙,毕竟是从Java语言中引过来的:
function Person(name){
this.name = name;
}
Person.prototype.showName = function(){
return this.name;
};
var p1 = new Person('苏日俪格');
console.log(p1.showName()); // 苏日俪格
那么在我们ES6中,就不会这么粗糙了:
class Person{ // Person类 它也是一个函数
constructor(name){ // 构造函数
this.name = name;
}
showName(){
return this.name;
}
}
var p1 = new Person('苏日俪格');
console.log(p1.showName()); // 苏日俪格
constructor的中文意思就是构造,他在这里代表的就是构造函数,那么class是一个类也是一个函数,只不过ES6标准是把这个函数包装成了一个class的写法而已,在new一个实例的时候,构造函数自动执行。
在写类的过程中,有一点需要注意:class没有预解析,实例化一定要放在下面;在ES5里面用函数来模拟类就可以,因为函数是有提升的功能的
关于ES6中类的新玩法我们已经掌握,那么类的继承的玩法是不是也变了呢?
让我们对比一下,先来看看以前的写法:
function Person(name){ // 父类
this.name = name;
}
Person.prototype.showName = function(){
return this.name;
};
function SubPerson(name,job){ // 子类
Person.call(this,name); // 子类继承父类的属性 需要将this指向父类中的name
this.job = job; // job是子类自己的属性
}
SubPerson.prototype = new Person(); // 子类继承父类的方法
var p1 = new SubPerson('苏日俪格');
console.log(p1.name); // 苏日俪格
// console.log(p1.showName()); // 苏日俪格
再来看看现在的写法:
class Person{
constructor(name){
this.name = name;
}
showName(){
return this.name;
}
}
class SubPerson extends Person{
constructor(name,job){
super(name); // 指向父类的构造函数
this.job = job;
}
showJob(){
return this.job;
}
}
var p1 = new SubPerson('苏日俪格','前端开发');
console.log(p1.name); // 苏日俪格
// console.log(p1.showName()); // 苏日俪格
// console.log(p1.job); // 前端开发
玩过java的都应该知道,extends就代表这继承的意思,super就是指向父类的构造函数,指代了整个prototype对象或者_proto_指针指向的对象,在ES6里面呢也是相同的意思,可以省去不少代码和原型链的过程
如果在子类中也写入showName方法,和父类中的方法重名,这样就会覆盖父类的,倘若不想覆盖而是想引用父类的showName方法,那么就在子类的showName方法中通过super来调用父类的showName:super.showName
关于类和继承我们都已经了然于心,预知Symbol & generator如何,请听下回分解 (^∀^)/~~~
本文的所有内容均是一字一句敲上去的,希望大家阅读完本文可以有所收获,因为能力有限,掌握的知识也是不够全面,欢迎大家提出来一起分享!谢谢O(∩_∩)O~
欢迎访问我的GitHub,喜欢的可以star,项目随意fork,支持转载但要下标注,同时恭候:个人博客