和其它面向對象編程語言一樣,ES6 正式定義了class類以及extend繼承語法糖,並且支持靜態方法、派生,而且根據ES6的新特性衍生出很多有趣的用法。
一、類的基本定義
基本所有面向對象的語言都支持類的封裝與繼承,那什麼是類?
類是面向對象程序設計的基礎,包含數據封裝、數據操作以及傳遞消息的函數。類的實例稱爲對象。
ES5 之前通過函數來模擬類的實現如下:
// 構造函數
function Person(name) {
this.name = name;
}
// 原型上的方法
Person.prototype.sayName = function(){
console.log(this.name);
};
// new 一個實例
var friend = new Person("Jenny");
friend.sayName(); // Jenny
console.log(friend instanceof Person); // true
console.log(friend instanceof Object); // true
總結來說,定義一個類的思路如下:
- 1.需要構造函數封裝數據
- 2.在原型上添加方法操作數據,
- 3.通過New創建實例
ES6 使用class
關鍵字定義一個類,這個類有特殊的方法名[[Construct]]
定義構造函數,在 new 創建實例時調用的就是[[Construct]]
,示例如下:
/*ES6*/
// 等價於 let Person = class {
class Person {
// 構造函數
constructor(name) {
this.name = name;
}
// 等價於Person.prototype.sayName
sayName() {
console.log(this.name);
}
}
console.log(typeof Person); // function
console.log(typeof Person.prototype.sayName); // function
let friend = new Person("Jenny");
friend.sayName(); // Jenny
console.log(friend instanceof Person); // true
console.log(friend instanceof Object); // true
上面的例子中class
定義的類與自定義的函數模擬類功能上貌似沒什麼不同,但本質上還有很大差異的:
- 函數聲明可以被提升,但是class類聲明與let類似,不能被提升;
- 類聲明自動運行在嚴格模式下,“use strict”;
- 類中所有方法都是不可枚舉的,enumerable 爲 false。
二、更靈活的類
類和函數一樣,是JavaScript的一等公民(可以傳入函數、從函數返回、賦值),並且注意到類與對象字面量還有更多相似之處,這些特點可以擴展出類更靈活的定義與使用。
2.1 擁有訪問器屬性
對象的屬性有數據屬性和訪問屬性,類中也可以通過get
、set
關鍵字定義訪問器屬性:
class Person {
constructor(name) {
this.name = name;
}
get value () {
return this.name + this.age
}
set value (num) {
this.age = num
}
}
let friend = new Person("Jenny");
// 調用的是 setter
friend.value = 18
// 調用的是 getter
console.log(friend.value) // Jenny18
2.2 可計算的成員名稱
類似 ES6 對象字面量擴展的可計算屬性名稱,類也可以用[表達式]定義可計算成員名稱,包括類中的方法和訪問器屬性:
let methodName = 'sayName'
class Person {
constructor(name) {
this.name = name;
}
[methodName + 'Default']() {
console.log(this.name);
}
get [methodName]() {
return this.name
}
set [methodName](str) {
this.name = str
}
}
let friend = new Person("Jenny");
// 方法
friend.sayNameDefault(); // Jenny
// 訪問器屬性
friend.sayName = 'lee'
console.log(friend.sayName) // lee
想進一步熟悉對象新特性可參考:【ES6】對象的新功能與解構賦值
2.3 定義默認迭代器
ES6 中常用的集合對象(數組、Set/Map集合)和字符串都是可迭代對象,如果類是用來表示值這些可迭代對象的,那麼定義一個默認迭代器會更有用。
ES6 通過給Symbol.iterator
屬性添加生成器的方式,定義默認迭代器:
class Person {
constructor(name) {
this.name = name;
}
*[Symbol.iterator]() {
for (let item of this.name){
yield item
}
}
}
var abbrName = new Person(new Set(['j', 'j', 'e', 'e', 'n', 'y', 'y', 'y',]))
for (let x of abbrName) {
console.log(x); // j e n y
}
console.log(...abbrName) // j e n y
定義默認迭代器後類的實例就可以使用for-of
循環和展開運算符(...)等迭代功能。
對以上迭代器內容感到困惑的可參考:【ES6】迭代器與可迭代對象
2.4 作爲參數的類
類作爲"一等公民”可以當參數使用傳入函數中,當然也可以從函數中返回:
function createClass(className, val) {
return new className(val)
}
let person = createClass(Person,'Jenny')
console.log(person) // Person { name: 'Jenny' }
console.log(typeof person) // object
2.5 創建單例
使用類語法創建單例的方式通過new立即調用類表達式:
let singleton = new class {
constructor(name) {
this.name = name;
}
}('Jenny')
console.log(singleton.name) // Jenny
這裏先創建匿名類表達式,然後 new 調用這個類表達式,並通過小括號立即執行,這種類語法創建的單例不會在作用域中暴露類的引用。
三、類的繼承
回顧 ES6 之前如何實現繼承?常用方式是通過原型鏈、構造函數以及組合繼承等方式。
ES6 的類使用熟悉的extends
關鍵字指定類繼承的函數,並且可以通過surpe()
方法訪問父類的構造函數。
例如繼承一個 Person 的類:
class Friend extends Person {
constructor(name, phone){
super(name)
this.phone = phone
}
}
let myfriend = new Friend('lee',2233)
console.log(myfriend) // Friend { name: 'lee', phone: 2233 }
Friend 繼承了 Person,術語上稱 Person 爲基類,Friend 爲派生類。
需要注意的是,surpe()
只能在派生類中使用,它負責初始化 this,所以派生類使用 this 之前一定要用surpe()
。
3.1 繼承內建對象
ES6 的類繼承可以繼承內建對象(Array、Set、Map 等),繼承後可以擁有基類的所有內建功能。例如:
class MyArray extends Array {
}
let arr = new MyArray(1, 2, 3, 4),
subarr = arr.slice(1, 3)
console.log(arr.length) // 4
console.log(arr instanceof MyArray) // true
console.log(arr instanceof Array) // true
console.log(subarr instanceof MyArray) // true
注意到上例中,不僅 arr 是派生類 MyArray 的實例,subarr 也是派生類 MyArray 的實例,內建對象繼承的實用之處是改變返回對象的類型。
瀏覽器引擎背後是通過[Symbol.species]
屬性實現這一行爲,它被用於返回函數的靜態訪問器屬性,內建對象定義了[Symbol.species]
屬性的有 Array、ArrayBuffer、Set、Map、Promise、RegExp、Typed arrays。
3.2 繼承表達式的類
目前extends
可以繼承類和內建對象,但更強大的功能從表達式導出類!
這個表達式要求可以被解析爲函數並具有[[Construct]]
屬性和原型,示例如下:
function Sup(val) {
this.value = val
}
Sup.prototype.getVal = function () {
return 'hello' + this.value
}
class Derived extends Sup {
constructor(val) {
super(val)
}
}
let der = new Derived('world')
console.log(der) // Derived { value: 'world' }
console.log(der.getVal()) // helloworld
3.3 只能繼承的抽象類
ES6 引入new.target
元屬性判斷函數是否通過new關鍵字調用。類的構造函數也可以通過new.target
確定類是如何被調用的。
可以通過new.target
創建抽象類(不能實例化的類),例如:
class Abstract {
constructor(){
if(new.target === Abstract) {
throw new Error('抽象類(不能直接實例化)')
}
}
}
class Instantiable extends Abstract {
constructor() {
super()
}
}
// let abs = new Abstract() // Error: 抽象類(不能直接實例化)
let abs = new Instantiable()
console.log(abs instanceof Abstract) // true
雖然不能直接使用 Abstract 抽象類創建實例,但是可以作爲基類派生其它類。
四、類的靜態成員
ES6 使用static
關鍵字聲明靜態成員或方法。在類的方法或訪問器屬性前都可以使用static
,唯一的限制是不能用於構造函數。
靜態成員的作用是某些類成員的私有化,及不可在實例中訪問,必須要直接在類上訪問。
class Person {
constructor(name) {
this.name = name;
}
static create(name) {
return new Person(name);
}
}
let beauty = Person.create("Jenny");
// beauty.create('lee') // TypeError
如果基類有靜態成員,那這些靜態成員在派生類也可以使用。
例如將上例的 Person 作爲基類,派生出 Friend 類並使用基類的靜態方法create( ):
class Friend extends Person {
constructor(name){
super(name)
}
}
var friend = Friend.create('lee')
console.log(friend instanceof Person) // true
console.log(friend instanceof Friend) // false
可以看出派生類依然可以使用基類的靜態方法。
加油哦少年!