ES6 类与继承

ES6中提供了一个关键字class允许我们声明一个类，通过关键字extends来实现类的继承，ES6中的类是一个语法糖，本质上还是由ES5的语法实现的，下面我们来详解ES6中的类与继承。

类

1.构造函数

先来看一下ES5中是如何定义一个类的

//ES5
function Person(name,age) {	//构造函数
    this.name=name;
    this.age=age;
    this.showName=function() {	
        console.log(this.name);
    }
}
var person=new Person('李雷',20);
person.showName();   //输出李雷
复制代码

ES5中，将一个方法写成一个构造函数以此来实现类。

//ES6
class Person {
    constructor (name='李雷',age=20) {	//构造函数
    	this.name=name;
    	this.age=age;
        this.showName = function() {
            console.log(this.name);
        }
    }
}
const person=new Person('李雷',20);
person.showName();   //输出李雷
复制代码

ES6中，使用关键字class声明一个类，在类中constructor函数是一个构造函数，用法与ES5类似。

注意：class跟let/const一样，是不存在变量声明提前的，调用class必须放在声明class之后。constructor函数若未定义，会自动生成一个方法体为空的constructor函数。

2 公有方法

ES5中的共有方法是定义在原型链上的，ES6则是直接写在类中，但它的原理依然是定义在原型链上的。

//ES5
function Person(name,age) {	//构造函数
    this.name=name;
    this.age=age;
}
Person.prototype.showName=function() {	
    console.log(this.name);
}
var person=new Person('李雷',20);
person.showName();   //输出李雷
复制代码

//ES6
class Person {
    constructor (name='李雷',age=20) {	//构造函数
    	this.name=name;
    	this.age=age;
    }
    showName() {
        console.log(this.name);
    }
}
const person=new Person('李雷',20);
person.showName();   //输出李雷
复制代码

3静态属性/方法

静态属性/方法是使用类名.属性名/方法名调用的，在JS中一切皆对象的思想，方法也不例外，方法也是一个对象，那么定义静态属性/方法的方式就很简单了，下面看例子。

//ES5
function Person() { //构造函数
}
Person._name='人';
Person.show=function() {
    console.log('Hello World');
}
console.log(Person._name);  //输出人
Person.show(); //输出Hello World
复制代码

//ES6
class Person {
    constructor () {	//构造函数
    }
    static show() {
        console.log('Hello World');
    }
}
Person._name='人';
console.log(Person._name);
Person.show();   //输出Hello World
复制代码

ES6中class内只允许声明静态方法，不允许声明静态属性。使用关键字static声明静态方法。静态属性的声明方式与ES5的声明方式相同。

继承

ES5中的继承首先要执行父类方法，然后将原型对象指向父类的原型对象，最后修正原型对象的constructor属性，使其指回子类构造函数，比较麻烦，ES6中采用关键字extends实现继承,使用super调用父类的构造函数。

//ES5
function Person(name) { //Person类
	this.name = name;
}
Person.prototype.showName = function() {//原型链上定义方法
	console.log(this.name);
}

function Student(name, age) {   //Student类
	Person.call(this, name);
	this.age = age;
}
Student.prototype=Person.prototype; //修改Student的原型对象
Student.prototype.constructor=Student;//修正Student的原型对象的constructor属性,完成继承
var student = new Student('李雷', 20);
student.showName(); //输出李雷
复制代码

//ES6
class Person {
    constructor (name) {	//Person类
		this.name=name;
	}
	showName() {
		console.log(this.name);
	}
}
class Student extends Person{ //Student类继承至Person类
	constructor(name,age) {
		super(name);
		this.age=age;
		
	}
}
const student=new Student('李雷',20);
student.showName();
复制代码

小结

JS一直不方便书写OOP代码，这会导致我们写出几千行的js文件，使用ES6书写OOP代码配合模块化，可以让我们梳理出更好的项目结构。

交流

如果这篇文章帮到你了，觉得不错的话来点个Star吧。 github.com/lizijie123

转载于:https://juejin.im/post/5cfc64736fb9a07f0c4674ba