開発者の皆さん！ PHP のクラスベースの継承に何年も取り組んできた後、JavaScript のプロトタイプの継承に飛び込むのは、左手で書くことを?qū)Wぶような気分でした。今日は、JavaScript を特別なものにする、継承へのこのユニークなアプローチについて私が學(xué)んだことを共有したいと思います。

基本 - 何が違うのか?

クラスを扱う PHP や Java とは異なり、JavaScript はプロトタイプを使用します。 JavaScript のすべてのオブジェクトには、「プロトタイプ」と呼ばれる別のオブジェクトへの內(nèi)部リンクがあります。これをフォールバック メカニズムとして考えてください。オブジェクトに存在しないプロパティにアクセスしようとすると、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"

プロトチェーン – さらに深くなる

ここからが興味深いところです。プロトタイプは獨(dú)自のプロトタイプを持つことができ、「プロトタイプ チェーン」と呼ばれるものを形成します。 JavaScript は、必要なものが見(jiàn)つかるか、null プロトタイプに到達(dá)するまで、このチェーンを検索し続けます。

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 のようなクラスベースの言語(yǔ)を使用している場(chǎng)合は、コンストラクター パターンの方が馴染みがあるかもしれません。

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 - 內(nèi)部クラス

ES6 ではクラス構(gòu)文が導(dǎo)入されました。これは、PHP 開発者にとっては馴染みのあるものかもしれません。しかし、だまされないでください。これは、プロトタイプの継承に対する糖衣構(gòu)文にすぎません:

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

現(xiàn)場(chǎng)からのプロのヒント

PHP と JavaScript の両方を何年も扱った後、私が學(xué)んだヒントをいくつか紹介します。

1. 可能な場(chǎng)合は継承より合成を優(yōu)先します
2. プロトタイプ チェーンは淺くしてください - 深いチェーンはパフォーマンスに悪影響を與える可能性があります
3. よりクリーンなコードを?qū)g現(xiàn)するにはクラス構(gòu)文を使用しますが、デバッグ用のプロトタイプについては理解してください
4. 継承チェーンを手動(dòng)で作成する場(chǎng)合は、常にコンストラクター プロパティを設(shè)定します

まとめ

プロトタイプの継承を理解することは、特に PHP または Java から來(lái)た場(chǎng)合、最初は奇妙に感じるかもしれません。しかし、一度クリックすると、その柔軟性とパワーの良さが分かるでしょう。これは、オブジェクト指向プログラミングについての考え方を変える JavaScript 機(jī)能の 1 つです。

JavaScript の継承に関して興味深い課題に遭遇したことがありますか?以下にコメントを入力してください - ぜひ皆さんの話を聞きたいです!

以上がJavaScript のプロトタイプ継承について - 開発ガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。