ES6 導入「類別」的概念而與網頁語言相比 其他程式設計語言的類別這裡的類別是特殊函式 可做為建立範本,讓您建立內含資料、屬性的物件 以及與這些資料操弄相關的方法。 這些物件、屬性和方法統稱為「成員」的 類別
如要定義類別,請使用 class
關鍵字。請遵循最佳做法
按照 JavaScript 內建建構函式函式建立的慣例,這種慣例就沒有
包含大寫字母類別的 ID:
class MyClass {}
課程旨在提供更多無障礙工作方式 原型和建構函式函式的功能:
class MyClass {}
typeof MyClass;
> "function"
因為是為了使用進階 JavaScript 而新增類別 並讓這些功能更吸引人,有時也稱為 「語法糖」。不過 類別不僅要提供實用的簡略工作 通訊協定繼承。 推出類別語法創造契機,進而解決長久以來的設計 但沒有發生回溯相容性問題與一起 舉例來說,類別主體中的所有程式碼一律會在 嚴格模式。
如要建立類別的執行個體,請使用 new
運算子。
class MyClass {}
const myClassInstance = new MyClass();
myClassInstance;
> Object { }
類別主體內定義的函式會公開為 該類別的例項
class MyClass {
classMethod() {
console.log( "My class method." );
}
}
const myClassInstance = new MyClass();
myClassInstance.classMethod();
> "My class method."
在類別中定義的方法,會成為 所產生執行個體由於 原型鏈進行呼叫 直接呼叫這些方法:
class MyClass {
classMethod() {
console.log( "My class method." );
}
}
const myClassInstance = new MyClass( "A string." );
myClassInstance;
> Object { }
<prototype>: Object { … }
classMethod: function classMethod()
constructor: class MyClass { constructor(myPassedValue) }
<prototype>: Object { … }
myClassInstance.classMethod();
> "My class method."
建立類別的執行個體會呼叫特殊的 constructor()
方法,而該方法會呼叫
執行任何必要的「設定」以便用於新建立的執行個體
所有相關聯的屬性當
您可以透過 constructor()
方法建立執行個體:
class MyClass {
constructor( myPassedValue ) {
console.log( myPassedValue );
}
}
const myClassInstance = new MyClass( "A string." );
> "A string."
在類別主體中,this
的值是指例項本身。
其中,任何在 this
中定義的屬性,都會以下列各例項的屬性形式公開:
該類別:
class MyClass {
constructor( myPassedValue ) {
this.instanceProperty = myPassedValue;
}
}
const myClassInstance = new MyClass( "A string." );
myClassInstance;
> Object { instanceProperty: "A string." }
這些屬性也適用於類別主體中的所有方法:
class MyClass {
constructor( myPassedValue ) {
this.instanceProp = myPassedValue;
}
myMethod() {
console.log( this.instanceProp );
}
}
const myClassInstance = new MyClass( "A string." );
myClassInstance.myMethod();
> "A string."
如未為類別定義 constructor()
,JavaScript 引擎就會呈現
假設為空白的「預設」constructor
。每個類別只能有一個
名為 constructor()
的方法:
class MyClass {
constructor() {}
constructor() {}
}
> Uncaught SyntaxError: A class may only have one constructor
您可以使用類別宣告或
類別運算式。先前的範例全都是類別宣告
而這類呼叫需要使用 new
叫用名稱。類別運算式可以命名或命名
離開未命名以建立「匿名」類別
let ClassExpression = class {
constructor() {}
};
ClassExpression;
> class {}
匿名類別運算式的其中一種用途 「即時」建構類別:
function classMaker() {
return class {
constructor() {}
};
}
let MyVariable = classMaker();
MyVariable;
> class {}
使用類別宣告重新宣告類別會導致語法錯誤:
class MyClass {
constructor( ) {
console.log( "My class." );
}
};
class MyClass {
constructor() {
console.log( "My new class." );
}
};
> Uncaught SyntaxError: redeclaration of class MyClass
不過,類別運算式可讓您重新定義類別:
let ClassExpression = class MyClass { };
ClassExpression = class MyOtherClass {
constructor( myString ) {
this.myProp = myString;
}
};
new ClassExpression( "String." );
> MyOtherClass {myProp: 'String.'}
不得使用類別的名稱叫用已命名的類別運算式 宣告內容不過,類別運算式指派的名稱是以 屬性,主要用來簡化偵錯作業:
let MyVariable = class MyClass {};
MyClass;
> Uncaught ReferenceError: MyClass is not defined
MyVariable;
> class MyClass {}
MyVariable.name;
> "MyClass"
使用類別運算式初始化變數時,
提升規則
正確地接在變數後方類別宣告會遵循
同樣「暫時死區間」let
和 const
假設他們尚未提升至目前範圍
這意味著在類別宣告之前叫用類別會導致錯誤:
{
let myVar = new MyClass( "Property string." );
class MyClass {
myProp;
constructor( myString ) {
this.myProp = myString;
}
};
};
> Uncaught ReferenceError: Cannot access 'MyClass' before initialization
隨堂測驗
以下何者正確定義類別?
myClass = class {}
class MyClass {}
new class()
一個類別可包含多少個 constructor()
方法?