ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScriptで継承を実装するにはどうすればよいですか?さまざまな手法の簡単な分析

JavaScriptで継承を実装するにはどうすればよいですか?さまざまな手法の簡単な分析

PHPz
リリース: 2023-04-24 11:40:44
オリジナル
755 人が閲覧しました

JavaScript の継承について話す前に、まずクラスとは何かを理解する必要があります。 Java、C、C# などの一般的なプログラミング言語では、クラスはデータとメソッドをカプセル化するために使用されるプログラム構造であり、インスタンス化を通じてオブジェクトを作成して、コードの再利用と抽象化を実現できます。

しかし、JavaScript では、クラスの定義と使用方法が他の言語とは少し異なります。 JavaScript クラスはオブジェクトに基づいており、オブジェクトは言語の中心です。 JavaScript にはそれほど複雑なクラス継承システムがなく、すべてのクラスを継承できます。つまり、Math や Date などの一部の特定の組み込みオブジェクトを除いて、JavaScript のほとんどのオブジェクトは基底クラスとして機能します。 。

JavaScript では、継承には次のメソッドがあります。

  1. プロトタイプ チェーンの継承:

プロトタイプ チェーンの継承は、JavaScript における最も基本的な継承メソッドです。プロトタイプを使用して、親クラスからの関数とプロパティの継承を実装します。簡単に言えば、サブクラスのプロトタイプは親クラスのインスタンスを指し、それによって継承が実現されます。このようにして、親クラスを拡張し、新しい属性とメソッドを追加できます。

例:

function Animal() {
  this.species = "动物";
}

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal();  // 将 Cat 的原型对象指向 Animal 的实例

var cat1 = new Cat('小红', '黑色');
console.log(cat1.species);  // 输出 "动物"
ログイン後にコピー
  1. 借用コンストラクターの継承:

借用コンストラクターの継承は、クラシック継承または盗まれたコンストラクターの継承とも呼ばれ、継承を指します。これは、サブクラスのコンストラクターで親クラスのコンストラクターを呼び出すことによって実現されます。この方法はプロトタイプチェーンの継承とは異なり、親クラスの属性を継承し、属性の独立性を実現することができます。

例:

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

function Cat(name, color) {
  Animal.call(this, name, color);  // 在 Cat 类的构造函数中调用 Animal 类的构造函数
}

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
ログイン後にコピー
  1. 結合継承:

結合継承とは、プロトタイプ チェーンの継承と借用したコンストラクターの継承を結合することを指します。 、親クラスのプロパティとメソッドを継承し、親クラスのプロパティとメソッドを使用できます。

例:

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

Animal.prototype.eat = function() {
  console.log('我是一只动物,我可以吃东西!');
}

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

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
ログイン後にコピー
  1. 寄生継承:

寄生継承とは、継承プロセスをカプセル化するためにのみ使用される関数を作成することを指します。 function 何らかの方法でオブジェクトを強化し、最終的にこのオブジェクトを返します。このオブジェクトは、継承を実現するためのサブクラスのプロトタイプ オブジェクトとして使用できます。

例:

function Animal(name) {
  var obj = {
    name: name,
    eat: function() {
      console.log('我是一只动物,我可以吃东西!');
    }
  };
  return obj;
}

function Cat(name, color) {
  var animal = Animal.call(this, name);
  animal.color = color;
  return animal;
}

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
ログイン後にコピー
  1. 寄生組み合わせ継承:

寄生組み合わせ継承とは、組み合わせ継承に基づく寄生継承を指し、オブジェクト継承のパフォーマンスを最適化します。継承は、親クラスのプロトタイプを継承する新しいオブジェクトを作成することで実現でき、親クラスのコンストラクターを呼び出すときにオブジェクトを初期化するという落とし穴を回避できます。

例:

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

Animal.prototype.eat = function() {
  console.log('我是一只动物,我可以吃东西!');
};

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

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

var cat1 = new Cat('小红', '黑色');
console.log(cat1.name);   // 输出 "小红"
console.log(cat1.color);  // 输出 "黑色"
cat1.eat();              // 输出 "我是一只动物,我可以吃东西!"
ログイン後にコピー

要約すると、JavaScript の継承はさまざまな方法で実装できますが、実際の開発では、特定のシナリオやニーズに応じて適切な方法を選択する必要があります。

以上がJavaScriptで継承を実装するにはどうすればよいですか?さまざまな手法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート