JavaScript はどのように継承を実装するのでしょうか?-フロントエンドQ&A-php.cn

JavaScript はどのように継承を実装するのでしょうか?

PHPz

リリース： 2023-04-06 10:10:36

オリジナル

1102 人が閲覧しました

JavaScript はオブジェクト指向言語であり、継承はオブジェクト指向プログラミングの重要な機能です。 JavaScript では継承を実装する方法が数多くありますが、この記事では、より一般的な方法のいくつかを紹介します。

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

プロトタイプチェーンの継承は、JavaScript の最も基本的な継承方法であり、最もよく使用される方法です。プロトタイプチェーンの継承を通じて、サブクラスは親クラスのプロパティとメソッドを継承できます。

プロトタイプチェーン継承の実装方法は次のとおりです。

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    this.age = age;
    Parent.call(this, name);
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

ログイン後にコピー

上記のコードでは、まず親クラス Parent とサブクラス Child を定義します。 Child では、Parent.call(this, name) を使用して親クラスのコンストラクターを呼び出し、Child.prototype = new Parent() によって Child のプロトタイプを Parent にポイントすることで継承を実現します。最後に、child1 と child2 という 2 つのサブクラスインスタンスを作成し、継承の効果を検証しました。

プロトタイプチェーン継承の利点は、実装が簡単で理解しやすいことです。しかし、その欠点も明らかです。つまり、プロトタイプオブジェクト内の参照型プロパティがすべてのインスタンスで共有されることになります。

2. コンストラクタの継承

コンストラクタ継承は、サブクラスのコンストラクタ内で親クラスのコンストラクタを呼び出すことで継承を実現する、比較的わかりやすい継承方法です。

コンストラクター継承の実装方法は次のとおりです。

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // TypeError: child1.sayName is not a function 

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // TypeError: child2.sayName is not a function

ログイン後にコピー

上記のコードでは、サブクラスのコンストラクター Child で Parent.call(this, name) を使用して、親クラスのコンストラクターを呼び出しています。そして継承は、これをサブクラスのインスタンスに指すことによって実現されます。ただし、コンストラクターの継承では親クラスのプロトタイプのメソッドが継承されないため、親クラスのプロトタイプのメソッドをサブクラスで直接呼び出すことはできません。

コンストラクター継承の利点は、プロトタイプチェーン継承で参照型属性がすべてのインスタンスで共有される問題を回避できることですが、欠点も明らかです。つまり、親クラスプロトタイプ内のメソッドを継承できないということです。遺伝性の。

3. 結合継承

結合継承は JavaScript で最も一般的に使用される継承メソッドであり、プロトタイプチェーンの継承とコンストラクターの継承を結合し、両方の問題を解決する方法です。。

結合継承の実装方法は次のとおりです。

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

ログイン後にコピー

上記のコードでは、サブクラスのコンストラクター Child で Parent.call(this, name) を使用して親クラスのコンストラクターを呼び出し、これはサブクラスのインスタンスを指し、それによって継承が実現されます。同時に、サブクラスのプロトタイプに Child.prototype = new Parent() を渡して、サブクラスに親クラスのプロトタイプを継承させ、親クラスのプロトタイプ内のメソッドを継承します。

結合継承の利点は、継承方法が完全であることです。親クラスのプロトタイプのメソッドを継承できるだけでなく、プロトタイプチェーンの継承において参照型属性がすべてのインスタンスで共有される問題を回避できます。。ただし、親クラスのコンストラクターを 2 回呼び出すため、ある程度のメモリ領域が無駄になるという欠点があります。

4. 寄生組み合わせ継承

寄生組み合わせ継承は組み合わせ継承の最適化手法であり、サブクラスのプロトタイプ内で親クラスのコンストラクターを複数回呼び出す問題を回避し、メモリのオーバーヘッドを削減します。

寄生組み合わせ継承の実装方法は次のとおりです:

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = Object.create(Parent.prototype, {
    constructor: {
        value: Child,
        enumerable: false,
        writable: true,
        configurable: true
    }
});

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

ログイン後にコピー

上記のコードでは、サブクラスプロトタイプの Object.create() メソッドを使用して、親クラスのコピーを作成します。 .create() の 2 番目のパラメーターは、サブクラスプロトタイプのコンストラクタープロパティをオーバーライドして、サブクラス自体を指すようにします。 Object.create() メソッドは親クラスのコンストラクターを呼び出さないため、子クラスのプロトタイプで親クラスのコンストラクターを複数回呼び出すという問題が回避されます。

寄生組み合わせ継承の利点は、親クラスのプロトタイプのメソッドを継承するだけでなく、子クラスのプロトタイプで親クラスのコンストラクターを複数回呼び出すという問題も回避できることです。欠点は、実装がより複雑になることです。

つまり、JavaScript で継承を実装する方法は数多くあり、それぞれの方法には独自の長所と短所があります。実際の開発では、状況に応じて適切な継承方法を選択する必要があります。

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