ฟิลด์และวิธีการของชั้นเรียน

ช่อง

ช่องของชั้นเรียนจะมีการประกาศโดยตรงภายในส่วนเนื้อหาของชั้นเรียน ไม่ใช่ประกาศอย่างชัดแจ้ง เพิ่มเป็นคุณสมบัติของค่า this แล้ว แต่ผลลัพธ์จะเหมือนกัน: ที่กำหนดไว้บนอินสแตนซ์ของคลาสนั้น

class MyClass {
    myField;
}

const myClassInstance = new MyClass();

myClassInstance;
> MyClass { myField: undefined }

คุณเริ่มต้นช่องด้วยค่าได้ ซึ่งมักเป็นค่าเริ่มต้นที่ ตรรกะภายในชั้นเรียนจะเขียนทับได้

class MyClass {
    myResult = false;
    set setValue( myValue ) {
        this.myResult = myValue;
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> Object { myResult: false }

myClassInstance.setValue = true;

myClassInstance;\
> Object { myResult: true }

ช่องของชั้นเรียนมีฟังก์ชันการทำงานเหมือนกับพร็อพเพอร์ตี้ที่แนบมากับชั้นเรียน ด้วย this ซึ่งหมายความว่าจะสามารถเข้าถึงและแก้ไขได้จากนอก เช่นเดียวกับพร็อพเพอร์ตี้อื่นๆ

class MyClass {
    myField = true;
}

const myClassInstance = new MyClass();

myClassInstance.myField;
> true

myClassInstance.myField = false;

myClassInstance.myField;
> false;

ช่องต่างๆ เป็นข้อมูลพื้นฐานสำหรับฟีเจอร์ขั้นสูงเพิ่มเติมบางรายการของชั้นเรียน

ช่องและวิธีการส่วนตัว

ช่องและวิธีการส่วนตัวเมื่ออยู่นอกชั้นเรียนจะเข้าถึงไม่ได้ ข้อมูลส่วนตัว เชื่อมโยงกับอินสแตนซ์ของคลาส ซึ่งหมายความว่าแต่ละอินสแตนซ์ มีชุดฟิลด์ส่วนตัวและเมธอดของตัวเองตามที่กำหนดไว้ในชั้นเรียน

หากต้องการทำให้พร็อพเพอร์ตี้เป็นแบบส่วนตัว ให้เพิ่ม # ไว้หน้าตัวระบุเมื่อ จงประกาศ

class MyClass {
    #myPrivateField = true;
    #myPrivateMethod() {}
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass { #myPrivateField: true }
    #myPrivateField: true
    <prototype>: Object { … }
        constructor: class MyClass {}
        <prototype>: Object { … }

ต้องประกาศช่องส่วนตัวในส่วนเนื้อหาของคลาสที่มีใบรับรอง คุณสามารถ เปลี่ยนค่าในภายหลังเป็นพร็อพเพอร์ตี้ของ this แต่คุณสร้างช่องไม่ได้ ด้วย this

ช่องส่วนตัวไม่สามารถเข้าถึงจากตำแหน่งอื่นในสคริปต์ได้ วิธีนี้จะป้องกันไม่ให้ข้อมูล จากการถูกเปลี่ยนแปลงภายนอกเมธอด Getter และ Setter ที่ระบุ โต้ตอบกับค่าที่มีอยู่ และป้องกันไม่ให้เข้าถึง ที่มีไว้สำหรับใช้ภายในคลาสเท่านั้น

class MyClass {
    #myResult = false;
    set setValue( myValue ) {
        this.#myResult = myValue;
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass { #myResult: false }

myClassInstance.#myResult = true;
> Uncaught SyntaxError: reference to undeclared private field or method #myResult

myClassInstance.setValue = true;

myClassInstance;\
> MyClass { #myResult: true }

อย่างไรก็ตาม โปรดทราบว่าเบราว์เซอร์ โดยทั่วไปคอนโซลของนักพัฒนาซอฟต์แวร์ เข้มงวดมาก แม้ว่าจะไม่สอดคล้องกัน แต่เกี่ยวกับการอนุญาตให้เข้าถึงฟิลด์ส่วนตัวเพื่อแก้ไขข้อบกพร่อง วัตถุประสงค์:

class MyClass {
    #myPrivateField = true;
    #myPrivateMethod() {
        console.log( "This is inside a private method." );
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass {#myPrivateField: true}

myClassInstance.#myPrivateField;
> true

myClassInstance.#myPrivateMethod();
> "This is inside a private method."

class MyClass {
    #myPrivateField = true;
    #myPrivateMethod() {
        console.log( "This is inside a private method." );
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass {#myPrivateField: true}

myClassInstance.#myPrivateField;
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateField

myClassInstance.#myPrivateMethod();
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateMethod

ช่องส่วนตัวจะมีขอบเขตจำกัดไว้เฉพาะเนื้อหาของชั้นเรียนที่มีช่องดังกล่าว ซึ่งหมายความว่าแม้แต่ชั้นเรียนย่อยก็ไม่สามารถเข้าถึงช่องส่วนตัว ชั้นเรียนหลัก:

class MyClass {
    #myPrivateField = true;
}
class ChildClass extends MyClass {
    childMethod() {
        console.log( this.#myPrivateField );
    }
}
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateField

ช่องและวิธีการแบบคงที่

ช่องและวิธีการแบบคงที่คือสมาชิกของกลุ่มเท่านั้น ไม่ใช่สมาชิกของ อินสแตนซ์ของคลาสนั้น ด้วยเหตุนี้ ฟิลด์แบบคงที่จะทำหน้าที่เป็น จุดสำหรับข้อมูลที่ไม่เฉพาะเจาะจงในคลาสแต่ละอินสแตนซ์ อินสแตนซ์อาจต้องการอ้างอิง เช่น ข้อมูลการกำหนดค่าที่แชร์ เมธอดแบบคงที่มักจะเป็นฟังก์ชันยูทิลิตีสำหรับการทำงานกับอินสแตนซ์ เช่น การเปรียบเทียบหรือจัดเรียงอินสแตนซ์กับฟิลด์ที่มี

หากต้องการกำหนดฟิลด์และวิธีการแบบคงที่ในเนื้อหาของชั้นเรียน ให้ใช้ static คีย์เวิร์ด:

class MyClass {
    static myStaticField;
    static myStaticMethod() {}
}
const myClassInstance = new MyClass();

นอกจากนี้ คุณยังสามารถใช้รูปแบบจุดเพื่อสร้างเมธอดแบบคงที่ได้ดังนี้

class MyClass {
    constructor() {}
}
MyClass.myStaticMethod = function() {}

คุณจะเข้าถึงพร็อพเพอร์ตี้คงที่จากอินสแตนซ์ของคลาสไม่ได้ แต่พร็อพเพอร์ตี้ดังกล่าว ที่ใช้ได้ในเครื่องมือสร้างชั้นเรียน:

class MyClass {
    static myStaticField = true;
    static myStaticMethod() {
        console.log( "A static method." );
    }
}
const myClassInstance = new MyClass();

myClassInstance.myStaticField;
> undefined

myClassInstance.myStaticMethod();
> Uncaught TypeError: myClassInstance.myStaticMethod is not a function

MyClass.myStaticField;
> true

MyClass.myStaticMethod();
> "A static method."

วิธีการที่ไม่จําเป็นในทางเทคนิค แต่การใช้วิธีการแบบคงที่เป็นแนวทางปฏิบัติแนะนำสำหรับ สร้างยูทิลิตี้ที่จะทำงานร่วมกับอินสแตนซ์ของคลาส ตัวอย่างของการทำเช่นนี้ รวมเมธอดแบบคงที่ซึ่งมีไว้สำหรับจัดเรียงอินสแตนซ์ของคลาส หรือ เมธอดจากโรงงานที่มีการตั้งค่าที่จำเป็นสำหรับการสร้างอินสแตนซ์ แล้วส่งกลับอินสแตนซ์ของคลาส:

class User {
    constructor( name, email ) {
        this.name = name;
        this.email = email;
    }
    static fromObject( myObject ) {
        return new User( myObject.name, myObject.email ?? "Omitted" );
    }
}
const userObject = {
    "name" : "My Name",
    "email" : "my@email.address"
};
const secondUserObject = {
    "name" : "My Name"
};

const firstUser = User.fromObject( userObject );
const secondUser = User.fromObject( secondUserObject );

firstUser;
> Object { name: "My Name", email: "my@email.address" }

secondUser;
> Object { name: "My Name", email: "Omitted" }

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

ฟิลด์ประเภทใดต่อไปนี้สามารถเข้าถึงได้เฉพาะจาก ในชั้นเรียน

ช่องส่วนตัว

ช่องของชั้นเรียน

Static fields