es6之js的類

libin19890520 發(fā)布于2019-07-31 10:15 / 525人閱讀

摘要：生成的類的原型會被自動調(diào)整，而你還能調(diào)用方法來訪問基類的構(gòu)造器。唯一能避免調(diào)用的辦法，是從類構(gòu)造器中返回一個對象。

起源

JS 從創(chuàng)建之初就不支持類，也沒有把類繼承作為定義相似對象以及關(guān)聯(lián)對象的主要方式，這讓不少開發(fā)者感到困惑。而從 ES1 誕生之前直到ES5 時期，很多庫都創(chuàng)建了一些工具，讓 JS 顯得貌似能支持類。盡管一些 JS 開發(fā)者強(qiáng)烈認(rèn)為這門語言不需要類，但為處理類而創(chuàng)建的代碼庫如此之多，導(dǎo)致 ES6 最終引入了類。

ES5 中的仿類結(jié)構(gòu)

JS 在 ES5 及更早版本中都不存在類。與類最接近的是：創(chuàng)建一個構(gòu)造器，然后將方法指派到
該構(gòu)造器的原型上。這種方式通常被稱為創(chuàng)建一個自定義類型。例如：

function PersonType(name) {
this.name = name;
}
PersonType.prototype.sayName = function() {
console.log(this.name);
};
let person = new PersonType("Nicholas");
person.sayName(); // 輸出 "Nicholas"
console.log(person instanceof PersonType); // true
console.log(person instanceof Object); // true

此代碼中的 PersonType 是一個構(gòu)造器函數(shù)，并創(chuàng)建了單個屬性 name 。 sayName() 方法被
指派到原型上，因此在 PersonType 對象的所有實例上都共享了此方法。接下來，使用 new
運算符創(chuàng)建了 PersonType 的一個新實例 person ，此對象會被認(rèn)為是一個通過原型繼承了
PersonType 與 Object 的實例。
這種基本模式在許多對類進(jìn)行模擬的 JS 庫中都存在，而這也是 ES6 類的出發(fā)點。

es6基本的類的聲明

類聲明以 class 關(guān)鍵字開始，其后是類的名稱；剩余部分的語法看起來就像對象字面量中的
方法簡寫，并且在方法之間不需要使用逗號。作為范例，此處有個簡單的類聲明：

class PersonClass {
// 等價于 PersonType 構(gòu)造器
constructor(name) {
this.name = name;
}
// 等價于 PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
}
let person = new PersonClass("Nicholas");
person.sayName(); // 輸出 "Nicholas"
console.log(person instanceof PersonClass); // true
console.log(person instanceof Object); // true
console.log(typeof PersonClass); // "function"
console.log(typeof PersonClass.prototype.sayName); // "function"

es6中類關(guān)鍵字class本質(zhì)是一種語法糖,而使用類實現(xiàn)的繼承其本質(zhì)上就是原型的繼承.

為何要使用類的語法

類聲明不會被提升，這與函數(shù)定義不同。類聲明的行為與 let 相似，因此在程序的執(zhí)行到達(dá)聲明處之前，類會存在于暫時性死區(qū)內(nèi)。

類聲明中的所有代碼會自動運行在嚴(yán)格模式下，并且也無法退出嚴(yán)格模式。

調(diào)用類構(gòu)造器時不使用 new ，會拋出錯誤。

試圖在類的方法內(nèi)部重寫類名，會拋出錯誤。

作為一級公民的類

在編程中，能被當(dāng)作值來使用的就稱為一級公民（ first-class citizen ），意味著它能作為參
數(shù)傳給函數(shù)、能作為函數(shù)返回值、能用來給變量賦值。 JS的函數(shù)就是一級公民（它們有時又
被稱為一級函數(shù)），此特性讓 JS 獨一無二
ES6 延續(xù)了傳統(tǒng)，讓類同樣成為一級公民。這就使得類可以被多種方式所使用。例如，它能
作為參數(shù)傳入函數(shù)：

function createObject(classDef) {
return new classDef();
}
let obj = createObject(class {
sayHi() {
console.log("Hi!");
}
});
obj.sayHi(); // "Hi!

使用派生類進(jìn)行繼承

ES6 之前，實現(xiàn)自定義類型的繼承是個繁瑣的過程。嚴(yán)格的繼承要求有多個步驟。例如，研
究以下范例：

function Rectangle(length, width) {
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function() {
return this.length * this.width;
};
function Square(length) {
Rectangle.call(this, length, length);
}
Square.prototype = Object.create(Rectangle.prototype, {
constructor: {
value:Square,
enumerable: true,
writable: true,
configurable: true
}
});
var square = new Square(3);
console.log(square.getArea()); // 9
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // true

Square 繼承了 Rectangle ，為此它必須使用 Rectangle.prototype 所創(chuàng)建的一個新對象來
重寫 Square.prototype ，并且還要調(diào)用 Rectangle.call() 方法。這些步驟常常會搞暈 JS
的新手，并會成為有經(jīng)驗開發(fā)者出錯的根源之一。

類讓繼承工作變得更輕易，使用熟悉的 extends 關(guān)鍵字來指定當(dāng)前類所需要繼承的函數(shù)，即
可。生成的類的原型會被自動調(diào)整，而你還能調(diào)用 super() 方法來訪問基類的構(gòu)造器。此處
是與上個例子等價的 ES6 代碼：

class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
}
class Square extends Rectangle {
constructor(length) {
// 與 Rectangle.call(this, length, length) 相同
super(length, length);
}
}
var square = new Square(3);
console.log(square.getArea()); // 9
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // true

使用 super() 時需牢記以下幾點：

你只能在派生類中使用 super() 。若嘗試在非派生的類（即：沒有使用 extends關(guān)鍵字的類）或函數(shù)中使用它，就會拋出錯誤。

在構(gòu)造器中，你必須在訪問 this 之前調(diào)用 super() 。由于 super() 負(fù)責(zé)初始化this ，因此試圖先訪問 this 自然就會造成錯誤。

唯一能避免調(diào)用 super() 的辦法，是從類構(gòu)造器中返回一個對象。

總結(jié)

ES6 的類讓 JS 中的繼承變得更簡單，因此對于你已從其他語言學(xué)習(xí)到的類知識，你無須將其
丟棄。 ES6 的類起初是作為 ES5 傳統(tǒng)繼承模型的語法糖，但添加了許多特性來減少錯誤。