開(kāi)發(fā)者們大家好！在使用 PHP 基於類別的繼承多年之後，深入研究 JavaScript 的原型繼承感覺(jué)就像學(xué)習(xí)用左手寫(xiě)字一樣。今天，我想分享我所學(xué)到的關(guān)於這種獨(dú)特的繼承方法的知識(shí)，這種方法使 JavaScript 變得特別。

基礎(chǔ)知識(shí) - 有何不同？

與使用類別的 PHP 或 Java 不同，JavaScript 使用原型。 JavaScript 中的每個(gè)物件都有一個(gè)到另一個(gè)物件的內(nèi)部鏈接，稱為「原型」。將其視為一種後備機(jī)制 - 當(dāng)您嘗試存取物件中不存在的屬性時(shí)，JavaScript 會(huì)在物件的原型中尋找它。

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 將繼續(xù)尋找該鏈，直到找到所需內(nèi)容或找到空原型。

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"

建構(gòu)函式模式 - 一種更熟悉的方法

如果您來(lái)自 PHP 等基於類別的語(yǔ)言，您可能會(huì)發(fā)現(xiàn)建構(gòu)子模式更熟悉：

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"

現(xiàn)代 JavaScript - 底層類

ES6 引入了類別語(yǔ)法，PHP 開(kāi)發(fā)人員可能會(huì)覺(jué)得很熟悉。但不要被愚弄了 - 它只是原型繼承的語(yǔ)法糖：

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

來(lái)自戰(zhàn)壕的專業(yè)技巧

經(jīng)過(guò)多年使用 PHP 和 JavaScript，以下是我學(xué)到的一些技巧：

1. 盡可能選擇組合而不是繼承
2. 保持原型鏈淺 - 深鏈會(huì)損害性能
3. 使用類別語(yǔ)法來(lái)獲得更清晰的程式碼，但了解原型以進(jìn)行調(diào)試
4. 手動(dòng)建立繼承鏈時(shí)始終設(shè)定建構(gòu)子屬性

總結(jié)

理解原型繼承一開(kāi)始可能會(huì)感覺(jué)很奇怪，特別是如果您來(lái)自 PHP 或 Java。但一旦使用，您就會(huì)欣賞到它的靈活性和強(qiáng)大功能。這是 JavaScript 功能之一，它讓您對(duì)物件導(dǎo)向程式設(shè)計(jì)有不同的思考。

您在 JavaScript 繼承方面遇到任何有趣的挑戰(zhàn)嗎？在下面發(fā)表評(píng)論 - 我很想聽(tīng)聽(tīng)你的故事！

以上是了解 JavaScript 的原型繼承 - 開(kāi)髮指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！