ขยายเวลาชั้นเรียน

ระบบใช้คีย์เวิร์ด extends ในการประกาศหรือนิพจน์คลาสเพื่อสร้างคลาสที่ทำหน้าที่เป็นคลาสย่อยของอีกคลาสหนึ่ง โดยมีคลาสระดับบน (บางครั้งเรียกว่า "คลาสพื้นฐาน") ทำหน้าที่เป็นต้นแบบของคลาสย่อย (บางครั้งเรียกว่า "คลาสย่อย" หรือ "คลาสที่ได้รับแล้ว")

class ParentClass {}
class ChildClass extends ParentClass {}

Object.getPrototypeOf( ChildClass );
> class ParentClass {}

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

คลาสย่อยสามารถจัดเตรียมวิธีการที่รับมาจากคลาสระดับบนของตนเอง ดังนี้

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}
class ChildClass extends MyClass {
  classMethod() {
    console.log( `The value was '${ this.instanceProp },' and its type was '${ typeof this.instanceProp }.'`)
  }
}

const myParentClassInstance = new MyClass( "My string." );
const mySubclassInstance = new ChildClass( 100 );

myParentClassInstance.classMethod();
> "The value type was 'string.'"

mySubclassInstance.classMethod();
> "The value was '100,' and its type was 'number.'"

นอกจากนี้ คุณยังเรียกใช้เมธอดที่กำหนดไว้ในคลาสหลักในบริบทของคลาสย่อยได้โดยใช้ super ดังนี้

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}

class ChildClass extends MyClass {
  subclassMethod() {
    super.classMethod();
    console.log( `The value type was '${ typeof this.instanceProp }.'`)
  }
}
const mySubclassInstance = new ChildClass( 100 );

mySubclassInstance.subclassMethod();
> The value was '100.'
> The value type was 'number.'

ดังที่เห็นในตัวอย่างก่อนหน้านี้ เมื่อละเว้นเมธอด constructor() ในบริบทของคลาสย่อย ตัวสร้างโดยนัยของ JavaScript จะเรียกตัวสร้างระดับบนสุดพร้อมกับอาร์กิวเมนต์ชุดเดียวกัน อย่างไรก็ตาม หากมีตัวสร้างในคลาสย่อย จะต้องเรียกใช้ super() พร้อมกับอาร์กิวเมนต์ที่จำเป็นก่อนอ้างอิง this

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}

class ChildClass extends MyClass {
    constructor( myPassedValue ) {
        super( myPassedValue );
        this.modifiedProp = myPassedValue + 50;
    }\
    subclassMethod() {
        super.classMethod();
        console.log( `The value type was '${ typeof this.instanceProp }.'`)
    }
}
const mySubclassInstance = new ChildClass( 100 );

mySubclassInstance;
> MyClass { instanceProp: 100, modifiedProp: 150 }

Getter และ Setter เป็นวิธีพิเศษที่ใช้เฉพาะเพื่อเรียกและกำหนดค่าตามลำดับ เมธอดที่ระบุโดยใช้คีย์เวิร์ด get และ set จะช่วยให้คุณสร้างเมธอดที่โต้ตอบได้ราวกับว่าเป็นพร็อพเพอร์ตี้แบบคงที่

class MyClass {
    constructor( originalValue ) {
        this.totalValue = 0;
    }
    set doubleThisValue( newValue ) {
        this.totalValue = newValue * 2;
    }
    get currentValue() {
        console.log( `The current value is: ${ this.totalValue }` );
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass { totalValue: 0 }

myClassInstance.doubleThisValue = 20;

myClassInstance.currentValue;
> The current value is: 40

พร็อพเพอร์ตี้ get และ set ได้รับการกำหนดบนพร็อพเพอร์ตี้ต้นแบบของคลาส ดังนั้นจึงพร้อมใช้งานสำหรับทุกอินสแตนซ์ของคลาส

ทดสอบความเข้าใจ

เลือกข้อความที่เป็นจริงเกี่ยวกับชั้นเรียนที่สร้างด้วยคีย์เวิร์ด extends

ซึ่งทำหน้าที่เป็นรายการย่อยของชั้นเรียนที่ขยายไป

และรับค่าพร็อพเพอร์ตี้และเมธอดจากคลาสระดับบน

ซึ่งทำหน้าที่เป็นระดับบนสุดของชั้นเรียนที่ขยายไป

It can't overwrite methods from a parent class.