JavaScript類繼承

阿新 • • 發佈：2022-05-05

宣告

該文部分程式碼和內容節選自菜鳥教程，僅用作個人學習，特此宣告

連結：https://www.runoob.com/

27.2 JavaScript類繼承

1、類繼承

JavaScript 類繼承使用 extends 關鍵字。

繼承允許我們依據另一個類來定義一個類，這使得建立和維護一個應用程式變得更容易。

super() 方法用於呼叫父類的建構函式。

當建立一個類時，您不需要重新編寫新的資料成員和成員函式，只需指定新建的類繼承了一個已有的類的成員即可。這個已有的類稱為基類（父類），新建的類稱為派生類（子類）。

繼承代表了 is a 關係。例如，哺乳動物是動物，狗是哺乳動物，因此，狗是動物，等等。

語法如下：
// 基類
class Animal {
    // eat() 函式
    // sleep() 函式
};
 
 
//派生類
class Dog extends Animal {
    // bark() 函式
};
super() 方法引用父類的構造方法。

通過在構造方法中呼叫 super() 方法，我們呼叫了父類的構造方法，這樣就可以訪問父類的屬性和方法。

繼承對於程式碼可複用性很有用。

練習例項

練習程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>類繼承聯絡</title>
</head>
<body>

<h2>JavaScript 類繼承</h2>

<p>JavaScript 類繼承使用 extends 關鍵字。</p>
<p>"super" 方法用於呼叫父類的建構函式。</p>

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

<script>
class Site {
  constructor(name) {
    this.sitename = name;
  }
  present() {
    return '我喜歡' + this.sitename;
  }
}

class Runoob extends Site {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  show() {
    return this.present() + ', 它建立了 ' + this.age + ' 年。';
  }
}

let noob = new Runoob("菜鳥教程", 5);
document.getElementById("demo").innerHTML = noob.show();
</script>

</body>
</html>

生成頁面效果

2、getter 和 setter

類中我們可以使用 getter 和 setter 來獲取和設定值，getter 和 setter 都需要在嚴格模式下執行。

getter 和 setter 可以使得我們對屬性的操作變的很靈活。

類中新增 getter 和 setter 使用的是 get 和 set 關鍵字。

以下例項為 sitename 屬性建立 getter 和 setter

class Runoob {
  constructor(name) {
    this.sitename = name;
  }
  get s_name() {
    return this.sitename;
  }
  set s_name(x) {
    this.sitename = x;
  }
}
 
let noob = new Runoob("菜鳥教程");
 
document.getElementById("demo").innerHTML = noob.s_name;

注意：即使 getter 是一個方法，當你想獲取屬性值時也不要使用括號。

getter/setter 方法的名稱不能與屬性的名稱相同，在本例中屬名為 sitename。

很多開發者在屬性名稱前使用下劃線字元 _ 將 getter/setter 與實際屬性區分開：

以下例項使用下劃線 _ 來設定屬性，並建立對應的 getter/setter 方法

class Runoob {
  constructor(name) {
    this._sitename = name;
  }
  get sitename() {
    return this._sitename;
  }
  set sitename(x) {
    this._sitename = x;
  }
}
 
let noob = new Runoob("菜鳥教程");
 
document.getElementById("demo").innerHTML = noob.sitename;

要使用 setter，請使用與設定屬性值時相同的語法，雖然 set 是一個方法，但需要不帶括號：

class Runoob {
  constructor(name) {
    this._sitename = name;
  }
  set sitename(x) {
    this._sitename = x;
  }
  get sitename() {
    return this._sitename;
  }
}
 
let noob = new Runoob("菜鳥教程");
noob.sitename = "RUNOOB";
document.getElementById("demo").innerHTML = noob.sitename; //Runoob

3、提升

函式宣告和類宣告之間的一個重要區別在於, 函式宣告會提升，類宣告不會。首先需要宣告你的類，然後再訪問它，否則類似以下的程式碼將丟擲 ReferenceError

使用前沒有宣告會報錯：

使用前已經宣告可以正常執行：

// 這裡不能這樣使用類，因為還沒有宣告
// noob = new Runoob("菜鳥教程")
// 報錯
 
class Runoob {
  constructor(name) {
    this.sitename = name;
  }
}
 
// 這裡可以使用類了
let noob = new Runoob("菜鳥教程")