開發(fā)者們大家好！在使用 PHP 基于類的繼承多年之后，深入研究 JavaScript 的原型繼承感覺就像學(xué)習(xí)用我的左手寫字一樣。今天，我想分享我所學(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)造函數(shù)模式 - 一種更熟悉的方法

如果您來自 PHP 等基于類的語言，您可能會(huì)發(fā)現(xiàn)構(gòu)造函數(shù)模式更熟悉：

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 引入了類語法，PHP 開發(fā)人員可能會(huì)覺得很熟悉。但不要被愚弄了 - 它只是原型繼承的語法糖：

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

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

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

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

總結(jié)

理解原型繼承一??開始可能會(huì)感覺很奇怪，特別是如果您來自 PHP 或 Java。但一旦使用，您就會(huì)欣賞到它的靈活性和強(qiáng)大功能。這是 JavaScript 功能之一，它讓您對面向?qū)ο缶幊逃胁煌乃伎肌?/p>

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

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