1. 程式人生 > 實用技巧 >【JavaScript】物件繼承

【JavaScript】物件繼承

以下內容為學習記錄,可以參考 MDN 原文。

環境

  • vscode 1.46
  • Microsoft Edge 83

概念

到目前為止我們已經瞭解了一些關於原型鏈的實現方式以及成員變數是如何通過它來實現繼承,
但是之前涉及到的大部分都是瀏覽器內建函式(比如 String、Date、Number 和 Array)。
那麼我們如何建立一個繼承自另一物件的JavaScript物件呢?

ES2015 在實現繼承的方式簡單了許多,下面基於 ES2015 實現。

定義 Person

function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
};

定義 Teacher

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);

    // subject and grade are specific to Teacher
    this.subject = subject;
    this.grade = grade;
  }
}

getter 和 setter

getter 和 setter 在賦值和取值的時候,可以做一些額外的操作。

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);
    // subject and grade are specific to Teacher
    this._subject = subject;
    this.grade = grade;
  }

  get subject() {
    return this._subject;
  }

  set subject(newSubject) {
    this._subject = newSubject;
  }
}