類別

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"

使用類別運算式初始化變數時, 提升規則 正確地接在變數後方類別宣告會遵循 同樣「暫時死區間」letconst 假設他們尚未提升至目前範圍 這意味著在類別宣告之前叫用類別會導致錯誤:

{
    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() 方法?

無限制
一個