คีย์เวิร์ด extends
จะใช้ในการประกาศคลาสหรือนิพจน์เพื่อสร้าง
ที่ทำหน้าที่เป็นคลาสย่อยของอีกคลาสหนึ่ง โดยมีคลาสหลัก (ในบางครั้ง
ที่เรียกว่า "คลาสพื้นฐาน") ทำหน้าที่เป็นต้นแบบสำหรับชั้นเรียนย่อย (บางครั้ง
ที่เรียกว่า "คลาสย่อย" หรือ "ที่ได้รับ")
class ParentClass {}
class ChildClass extends ParentClass {}
Object.getPrototypeOf( ChildClass );
> class ParentClass {}
คลาสย่อยเหล่านี้จะรับค่าพร็อพเพอร์ตี้และเมธอดของคลาสระดับบน ช่วงเวลานี้ ช่วยให้คุณขยายฟังก์ชันหลักของคลาสเพื่อแสดงเนื้อหาที่เจาะจงมากขึ้น โดยไม่ทำให้คลาสระดับบนมากเกินไป เพื่อให้เหมาะกับ Use Case ทุกกรณีที่เป็นไปได้ หรือติดตั้งโค้ดที่มีจุดประสงค์ที่คล้ายกันอีกครั้ง
ชั้นเรียนย่อยจะให้วิธีการของตนเองที่รับช่วงมาได้ จากชั้นเรียนระดับบนสุด
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 }
Getters และ 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.