通過原型繼承

開放

4.1 繼承很簡單

繼承是物件導向程式設計 (OOP) 的一個基本概念,它允許一個類別(稱為子類別或子類)繼承另一個類別(稱為父類別或超類別)的字段和方法。

繼承

這種方法允許創建更通用的類別並重複使用代碼,從而提高代碼的組織性和可維護性。

為什麼需要繼承?

假設你需要寫一些代碼,並決定以類別的形式寫成。然後你發現你的專案中已經存在一個類別,可以幾乎滿足你的需求。你可以簡單地將這個類別的代碼複製到你的類別中,隨心所欲地使用。

但你也可以「好像複製」。你可以將該類別宣告為你的類別的父類,這樣 JavaScript 會將父類的行為添加到你的類別中。

想像一下,你是大自然,你想創造一隻狗。是花十億年從細菌創造狗比較快,還是花二十萬年使狼成為家犬比較快?

4.2 通過原型繼承的概念

在 JavaScript 中通過原型進行繼承——這是允許對象繼承其他對象的屬性和方法的主要機制之一。這使得可以創建複雜的物件層次結構並重複使用代碼。

JavaScript 中的每個物件都有一個隱藏的屬性 [[Prototype]],指向它的原型。原型用於實現繼承,允許物件繼承其他物件的屬性和方法。

簡單繼承的範例

步驟 1:創建基本物件

JavaScript
const animal = {
  eat() {
    console.log('Eating...');
  },

  sleep() {
    console.log('Sleeping...');
  }
};

步驟 2:創建繼承的物件

JavaScript
const dog = Object.create(animal);

dog.bark = function() {
  console.log('Barking...');
};

步驟 3:使用繼承的屬性和方法

JavaScript
dog.eat();   // 印出: Eating...
dog.sleep(); // 印出: Sleeping...
dog.bark();  // 印出: Barking...

在這個範例中,物件 dog 繼承了物件 animal 的方法 eat()sleep(),並且添加了自己的方法 — bark()

4.3 深入原型繼承

原型鏈

在 JavaScript 中,繼承可以更加複雜,當物件互相繼承時,形成原型鏈。

原型鏈的範例

在這個範例中,物件 dog 繼承自 mammal,而 mammal 則繼承自 animal。這樣就形成了原型鏈,dog 可以存取所有 mammalanimal 的方法。

JavaScript
const animal = {
  eat() {
    console.log('Eating...');
  }
};

const mammal = Object.create(animal);

mammal.walk = function() {
  console.log('Walking...');
};

const dog = Object.create(mammal);
dog.bark = function() {
  console.log('Barking...');
};

dog.eat();   // 印出: Eating...
dog.walk();  // 印出: Walking...
dog.bark();  // 印出: Barking...

檢查原型鏈

方法 isPrototypeOf() 允許檢查一個物件是否是另一個物件的原型。

範例:

JavaScript
console.log(animal.isPrototypeOf(mammal)); // 印出: true
console.log(mammal.isPrototypeOf(dog));    // 印出: true
console.log(animal.isPrototypeOf(dog));    // 印出: true

4.4 方法重寫

通過原型繼承不僅可以添加新方法,還可以重寫現有的方法。

方法重寫的範例

在這個範例中,物件 dog 重寫了物件 animal 的方法 speak()

JavaScript
const animal = {
  speak() {
    console.log('Animal speaks');
  }
};

const dog = Object.create(animal);
dog.speak = function() {
  console.log('Dog barks');
};

animal.speak(); // 印出: Animal speaks
dog.speak();    // 印出: Dog barks

調用父物件的方法

要在 JavaScript 中調用父物件的方法,可以使用 call()apply() 方法。

範例:

JavaScript
const animal = {
  speak() {
    console.log('Animal speaks');
  }
};

const dog = Object.create(animal);
dog.speak = function() {
  animal.speak.call(this);
  console.log('Dog barks');
};

dog.speak();

// 印出:
// Animal speaks
// Dog barks

4.5 進階使用原型繼承

擴展內建物件

你可以通過向它們的原型添加方法來擴展 JavaScript 的內建物件。

範例:

JavaScript
Array.prototype.sum = function() {
  return this.reduce((acc, value) => acc + value, 0);
};

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.sum()); // 印出: 15

創建多級層次結構

你可以使用原型繼承創建更複雜的多級物件層次結構。

範例:

JavaScript
const livingBeing = {
  breathe() {
    console.log('Breathing...');
  }
};

const animal = Object.create(livingBeing);
animal.eat = function() {
  console.log('Eating...');
};

const mammal = Object.create(animal);
mammal.walk = function() {
  console.log('Walking...');
};

const dog = Object.create(mammal);
dog.bark = function() {
  console.log('Barking...');
};

dog.breathe(); // 印出: Breathing...
dog.eat();     // 印出: Eating...
dog.walk();    // 印出: Walking...
dog.bark();    // 印出: Barking...
1
任務
Frontend SELF TW,  等級 39課堂 3
上鎖
重寫方法
重寫方法
1
任務
Frontend SELF TW,  等級 39課堂 3
上鎖
Array 的 sum 方法
Array 的 sum 方法
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言