ES6 นำเสนอแนวคิด "ชั้นเรียน" ใน JavaScript ซึ่งแตกต่างจาก ชั้นเรียนในภาษาโปรแกรมอื่นๆ ในที่นี้ ชั้นเรียนคือฟังก์ชันพิเศษที่ ทำหน้าที่เป็นเทมเพลตสำหรับการสร้างออบเจ็กต์ที่มีข้อมูล พร็อพเพอร์ตี้อยู่แล้ว ที่เกี่ยวข้องกับข้อมูลนั้น และวิธีการที่เกี่ยวข้องกับการบิดเบือนข้อมูลนั้น ออบเจ็กต์ พร็อพเพอร์ตี้ และเมธอดเหล่านี้เรียกรวมกันว่า "สมาชิก" ของ
หากต้องการกำหนดคลาส ให้ใช้คีย์เวิร์ด class
ทำตามแนวทางปฏิบัติแนะนำและ
กฎเกณฑ์ที่สร้างขึ้นด้วยฟังก์ชันตัวสร้างในตัวของ JavaScript เริ่มต้น
ตัวระบุชั้นเรียนที่มีอักษรตัวพิมพ์ใหญ่ เช่น
class MyClass {}
ชั้นเรียนมีวัตถุประสงค์เพื่อนำเสนอวิธีเข้าถึงได้ง่ายขึ้นในการทำงานร่วมกับขั้นสูง ของต้นแบบและฟังก์ชันของตัวสร้าง:
class MyClass {}
typeof MyClass;
> "function"
เนื่องจากมีการเพิ่มชั้นเรียนบางส่วนเพื่อให้ทำงานกับ JavaScript ขั้นสูงได้ ง่ายขึ้นและน่าสนใจมากขึ้น บางครั้งเรียกว่า "น้ำตาลสังเคราะห์" อย่างไรก็ตาม ไม่ได้เพียงแค่ให้คำสั้นๆ ที่มีประโยชน์ในการทำงานร่วมกับ การสืบทอดต้นแบบ ขอแนะนำโอกาสในการสร้างไวยากรณ์ในชั้นเรียนเพื่อจัดการกับการออกแบบที่ยั่งยืน ใน 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
แต่ละชั้นเรียนมีพิเศษได้เพียง 1 รายการเท่านั้น
เมธอดชื่อ 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()
ได้กี่วิธี