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 は、必要なものが見つかるか、null プロトタイプに到達するまで、このチェーンを検索し続けます。

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 機能の 1 つです。

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

以上がJavaScript のプロトタイプ継承について - 開発ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。