การสืบทอดคลาส JavaScript

สารบัญ

มรดกคลาส

หากต้องการสร้างการสืบทอดคลาส ให้ใช้ extends คำสำคัญ.

คลาสที่สร้างขึ้นด้วยการสืบทอดคลาสจะสืบทอดวิธีการทั้งหมดจาก คลาสอื่น:

ตัวอย่าง

สร้างคลาสชื่อ "Model" ซึ่งจะสืบทอดวิธีการจาก "Car" ระดับ:

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();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Inheritance</h1>

<p>Use the "extends" keyword to inherit all methods from another class.</p>
<p>Use the "super" method to call the parent's constructor function.</p>

<p id="demo"></p>

<script>
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;
  }
}

const myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script>

</body>
</html>

super() วิธีการอ้างถึงผู้ปกครอง ระดับ.

โดยการเรียกเมธอด super() ในไฟล์ วิธีคอนสตรัคเตอร์ เราเรียกเมธอดคอนสตรัคเตอร์ของพาเรนต์และเข้าถึงได้ คุณสมบัติและวิธีการของผู้ปกครอง

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

ทะเยอทะยานและเซ็ตเตอร์

คลาสยังอนุญาตให้คุณใช้ getters และ setters

การใช้ getters และ setters สำหรับคุณสมบัติของคุณอาจเป็นเรื่องที่ชาญฉลาด โดยเฉพาะอย่างยิ่งหาก คุณต้องการทำสิ่งพิเศษกับค่าก่อนที่จะส่งคืนหรือก่อนหน้านั้น คุณตั้งค่าพวกเขา

หากต้องการเพิ่ม getters และ setters ในคลาส ให้ใช้ รับคำหลัก และ set

ตัวอย่าง

สร้างทะเยอทะยานและตัวตั้งค่าสำหรับคุณสมบัติ "carname":

 class Car {
  constructor(brand) {
    this.carname 
  = brand;
  }
  get cnam() {
    
  return this.carname;
  }
  set cnam(x) {
    
  this.carname = x;
  }
}
const myCar = new Car("Ford");

  document.getElementById("demo").innerHTML = myCar.cnam;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>A demonstration of how to add getters and setters in a class, and how to use the getter to get the property value.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

const myCar = new Car("Ford");

document.getElementById("demo").innerHTML = myCar.cnam;
</script>

</body>
</html>

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

ชื่อของเมธอด getter/setter ต้องไม่เหมือนกับชื่อของ คุณสมบัติ ในกรณีนี้คือ carname

<p>โปรแกรมเมอร์จำนวนมากใช้อักขระขีดล่าง _ หน้าชื่อคุณสมบัติเพื่อแยก getter/setter ออกจากคุณสมบัติจริง:

ตัวอย่าง

คุณสามารถใช้อักขระขีดล่างเพื่อแยก getter/setter ออกจาก ทรัพย์สินที่แท้จริง:

 class Car {
  constructor(brand) {
    this._carname 
  = brand;
  }
  get carname() {
    
  return this._carname;
  }
  set carname(x) {
    
  this._carname = x;
  }
}
const myCar = new Car("Ford");

  document.getElementById("demo").innerHTML = myCar.carname;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>Using an underscore character is common practice when using getters/setters in JavaScript, but not mandatory, you can name them anything you like, but not the same as the property name.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

const myCar = new Car("Ford");

document.getElementById("demo").innerHTML = myCar.carname;
</script>

</body>
</html>

หากต้องการใช้ ตัวตั้งค่า ให้ใช้ไวยากรณ์เดียวกันกับเมื่อคุณตั้งค่าคุณสมบัติ โดยไม่มีวงเล็บ:

ตัวอย่าง

ใช้ setter เพื่อเปลี่ยนชื่อรถเป็น "Volvo":

 class Car {
  constructor(brand) {
    this._carname 
  = brand;
  }
  get carname() {
    
  return this._carname;
  }
  set carname(x) {
    
  this._carname = x;
  }
}
const myCar = new Car("Ford");
  myCar.carname = "Volvo";
  document.getElementById("demo").innerHTML = myCar.carname;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Setters</h1>
<p>When using a setter to set a property value, you do not use parantheses.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(brand) {
    this._carname = brand;
  }
  set carname(x) {
    this._carname = x;
  }
  get carname() {
    return this._carname;
  }
}

const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
</script>

</body>
</html>

รอก

การประกาศคลาสจะไม่เหมือนกับฟังก์ชันและการประกาศ JavaScript อื่นๆ

นั่นหมายความว่าคุณต้องประกาศคลาสก่อนจึงจะสามารถใช้งานได้:

ตัวอย่าง

 //You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car {	  constructor(brand) {
    this.carname = brand;	  }
}
//Now you can use the class:
const myCar = new Car("Ford")

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes are not Hoisted</h1>
<p>You will get an error if you try to use a class before it is declared.</p>

<p id="demo"></p>

<script>
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

//Now you can use the class:
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

</script>

</body>
</html>

หมายเหตุ: สำหรับการประกาศอื่นๆ เช่น ฟังก์ชัน คุณจะไม่ได้รับ เกิดข้อผิดพลาดเมื่อคุณพยายามใช้ก่อนที่จะมีการประกาศ เนื่องจากพฤติกรรมเริ่มต้น ของการประกาศ JavaScript กำลังยกขึ้น (ย้ายการประกาศไปด้านบน)