การสืบทอดรายละเอียดของ JavaScript
- หน้าก่อนหน้า นิยาม JS ระบุประเภท
- หน้าต่อไป JS Static
ทำนองรุ่นย่อย
เพื่อที่จะสร้างรูปแบบที่ทำนองรุ่นย่อย ใช้: extends คำเปิดงาน。
รูปแบบที่สร้างด้วยการทำนองรุ่นย่อยจะทำนองทุกวิธีที่มีในรุ่นแม่:
ตัวอย่าง
สร้างรายชื่อ "Model" หนึ่ง ที่จะทำนองมาจาก "Car" รูปแบบเดียวกัน:
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'ฉันมีรถ ' + 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 ของหลักชั้น และได้รับสิทธิ์ในการเข้าถึงคุณสมบัติและวิธีของหลักชั้น:
การติดตามทางเชื้อเลือดมีประโยชน์ต่อการใช้ความสามารถการเรียกใช้รหัส: ใช้คุณสมบัติและวิธีของชั้นที่มีอยู่เพื่อสร้างชั้นใหม่:
Getter และ Setter
ชั้นยังอนุญาตให้คุณใช้ getter และ setter。
ใช้ getter และ setter สำหรับคุณสมบัติของคุณเป็นสิ่งที่ชาญฉลาด โดยเฉพาะหากคุณต้องการทำสิ่งพิเศษกับค่าก่อนที่จะส่งคืนหรือก่อนที่จะกำหนดค่า:
ถ้าต้องการเพิ่ม getter และ setter ในชั้น ให้ใช้ 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 จากคุณสมบัติที่แท้จริง:
ตัวอย่าง
คุณสามารถใช้อักษรของขีดใต้ ที่จะแยก 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;
Hoisting
ต่างจากฟังก์ชันและประกาศ JavaScript ต่างๆ ประกาศรูปแบบจะไม่ถูกเลื่อนขึ้น
นี่หมายความว่าคุณจะต้องประกาศรูปแบบก่อนที่จะสามารถใช้มันได้
ตัวอย่าง
// คุณยังไม่สามารถใช้รูปแบบนี้ได้
//myCar = new Car("Ford")
// นี่จะทำให้เกิดข้อผิดพลาด
class Car {
constructor(brand) {
this.carname = brand;
}
}
// ตอนนี้คุณสามารถใช้รูปแบบนี้ได้
let myCar = new Car("Ford")
หมายเหตุ：สำหรับการประกาศอื่น ๆ อย่างเช่นฟังก์ชัน จะไม่มีข้อผิดพลาดเมื่อพยายามใช้ประกาศก่อนการประกาศ เนื่องจากพฤติกรรมประกาศ JavaScript โดยเริ่มต้นคือการเลื่อนขึ้น (ย้ายประกาศไปยังด้านบน)
- หน้าก่อนหน้า นิยาม JS ระบุประเภท
- หน้าต่อไป JS Static
