了解 JavaScript 的原型繼承 - 開髮指南

開發者們大家好！在使用 PHP 基於類別的繼承多年之後，深入研究 JavaScript 的原型繼承感覺就像學習用左手寫字一樣。今天，我想分享我所學到的關於這種獨特的繼承方法的知識，這種方法使 JavaScript 變得特別。

基礎知識 - 有何不同？

與使用類別的 PHP 或 Java 不同，JavaScript 使用原型。 JavaScript 中的每個物件都有一個到另一個物件的內部鏈接，稱為「原型」。將其視為一種後備機制 - 當您嘗試存取物件中不存在的屬性時，JavaScript 會在物件的原型中尋找它。

const pet = {
  makeSound() {
    return "Some generic sound";
  }
};

const cat = {
  purr() {
    return "Purrrr";
  }
};

// Set pet as the prototype of cat
Object.setPrototypeOf(cat, pet);

// Now cat can use methods from pet
console.log(cat.makeSound()); // "Some generic sound"
console.log(cat.purr());      // "Purrrr"

原鏈－更深入

這就是有趣的地方。原型可以有自己的原型，形成我們所謂的「原型鏈」。 JavaScript 將繼續尋找該鏈，直到找到所需內容或找到空原型。

const animal = {
  eat() {
    return "Nom nom nom";
  }
};

const pet = {
  makeSound() {
    return "Some generic sound";
  }
};

const cat = {
  purr() {
    return "Purrrr";
  }
};

Object.setPrototypeOf(pet, animal);
Object.setPrototypeOf(cat, pet);

// cat can now access methods from both pet and animal
console.log(cat.purr());      // "Purrrr"
console.log(cat.makeSound()); // "Some generic sound"
console.log(cat.eat());       // "Nom nom nom"

建構函式模式 - 一種更熟悉的方法

如果您來自 PHP 等基於類別的語言，您可能會發現建構子模式更熟悉：

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  return `${this.name} is eating`;
};

function Cat(name) {
  Animal.call(this, name);
}

// Set up inheritance
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.purr = function() {
  return `${this.name} says purrrr`;
};

const felix = new Cat("Felix");
console.log(felix.eat());  // "Felix is eating"
console.log(felix.purr()); // "Felix says purrrr"

現代 JavaScript - 底層類

ES6 引入了類別語法，PHP 開發人員可能會覺得很熟悉。但不要被愚弄了 - 它只是原型繼承的語法糖：

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    return `${this.name} is eating`;
  }
}

class Cat extends Animal {
  purr() {
    return `${this.name} says purrrr`;
  }
}

const felix = new Cat("Felix");

來自戰壕的專業技巧

經過多年使用 PHP 和 JavaScript，以下是我學到的一些技巧：

1. 盡可能選擇組合而不是繼承
2. 保持原型鏈淺 - 深鏈會損害性能
3. 使用類別語法來獲得更清晰的程式碼，但了解原型以進行調試
4. 手動建立繼承鏈時始終設定建構子屬性

總結

理解原型繼承一開始可能會感覺很奇怪，特別是如果您來自 PHP 或 Java。但一旦使用，您就會欣賞到它的靈活性和強大功能。這是 JavaScript 功能之一，它讓您對物件導向程式設計有不同的思考。

您在 JavaScript 繼承方面遇到任何有趣的挑戰嗎？在下面發表評論 - 我很想聽聽你的故事！

以上是了解 JavaScript 的原型繼承 - 開髮指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！