การสืบทอดคลาส JavaScript
การสืบทอดคลาส
หากต้องการสร้างการสืบทอดคลาส ให้ใช้extends
คีย์เวิร์ด
คลาสที่สร้างด้วยการสืบทอดคลาสจะสืบทอดวิธีการทั้งหมดจากคลาสอื่น:
ตัวอย่าง
สร้างคลาสชื่อ "รุ่น" ซึ่งจะสืบทอดเมธอดจากคลาส "รถยนต์":
class Car {
constructor(brand) {
this.carname =
brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML
= myCar.show();
วิธี การsuper()นี้อ้างถึงคลาสพาเรนต์
การเรียกsuper()เมธอดในเมธอด Constructor เราเรียกเมธอด Constructor ของพาเรนต์ และเข้าถึงคุณสมบัติและเมธอดของพาเรนต์
การสืบทอดมีประโยชน์สำหรับการนำโค้ดกลับมาใช้ใหม่: นำคุณสมบัติและวิธีการของคลาสที่มีอยู่มาใช้ซ้ำเมื่อคุณสร้างคลาสใหม่
Getters และ Setters
คลาสยังให้คุณใช้ getters และ setters ได้อีกด้วย
การใช้ getter และ setters สำหรับพร็อพเพอร์ตี้ของคุณเป็นเรื่องที่ฉลาด โดยเฉพาะอย่างยิ่งหากคุณต้องการทำอะไรที่พิเศษด้วยค่าก่อนที่จะส่งคืน หรือก่อนที่คุณจะตั้งค่า
ในการเพิ่ม getters และ setters ในชั้นเรียน ให้ใช้ the
getและsetคีย์เวิร์ด
ตัวอย่าง
สร้าง getter และ setter สำหรับคุณสมบัติ "carname":
class Car {
constructor(brand) {
this.carname
= brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
หมายเหตุ:แม้ว่า getter เป็นเมธอด คุณจะไม่ใช้วงเล็บเมื่อต้องการรับค่าคุณสมบัติ
ชื่อของเมธอด getter/setter ต้องไม่เหมือนกับชื่อของคุณสมบัติ ในกรณีcarnameนี้
โปรแกรมเมอร์จำนวนมากใช้อักขระขีดล่าง_
หน้าชื่อคุณสมบัติเพื่อแยกตัวรับ/ตัวตั้งค่าออกจากคุณสมบัติจริง:
ตัวอย่าง
คุณสามารถใช้อักขระขีดล่างเพื่อแยก getter/setter ออกจากคุณสมบัติจริง:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
ในการใช้setterให้ใช้ไวยากรณ์เดียวกับเมื่อคุณตั้งค่าคุณสมบัติโดยไม่มีวงเล็บ:
ตัวอย่าง
ใช้ setter เพื่อเปลี่ยนชื่อรถเป็น "Volvo":
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
รอก
ไม่เหมือนกับฟังก์ชันและการประกาศ JavaScript อื่นๆ การประกาศคลาสจะไม่ถูกยกขึ้น
นั่นหมายความว่าคุณต้องประกาศคลาสก่อนจึงจะสามารถใช้งานได้:
ตัวอย่าง
//You cannot use the class yet.
//myCar = new Car("Ford")
//This would
raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car("Ford")
หมายเหตุ:สำหรับการประกาศอื่นๆ เช่น ฟังก์ชัน คุณจะไม่ได้รับข้อผิดพลาดเมื่อคุณพยายามใช้ก่อนที่จะมีการประกาศ เนื่องจากพฤติกรรมเริ่มต้นของการประกาศ JavaScript เป็นแบบยก (ย้ายการประกาศไปด้านบน)