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代碼配合模塊化，能夠讓咱們梳理出更好的項目結構。

更多ES6精髓如模塊化請看ES6快速入門。

交流

若是這篇文章幫到你了，以爲不錯的話來點個Star吧。 github.com/lizijie123