คลาส

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

ตรวจสอบความเข้าใจ

ข้อใดต่อไปนี้ระบุชั้นเรียนได้ถูกต้อง

class MyClass {}

myClass = class {}

new class()

ชั้นเรียนจะมี constructor() ได้กี่วิธี

1

ไม่มี

ไม่จำกัด