深入浅出ES6教程『类和继承』

大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了模块化的用法，下面我们一起来继续学习类和继承：

关于类的概念我想大家都很熟悉了，在面向对象编程的时候需要用到类，那么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，支持转载但要下标注，同时恭候：个人博客

等一下( •́ .̫ •̀ )，我还有最后一句话：
这里虽然没有都市的繁华，
也没有山林的鸟语花香，
只有一片如水的宁静，
古人云：
既来之则安之，
既然来到了这里，
就可以静心休憩你的灵魂，
调养你疲惫的心，
再见…

Menu