コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JavaScript 継承のさまざまな方法とその長所と短所の詳細な紹介

黄舟
リリース： 2017-05-14 10:12:02
オリジナル
1244 人が閲覧しました

この記事では、JavaScript継承を深く理解するためのさまざまな方法と利点と欠点を主に紹介します。興味のある友人はそれを参照してください

前に書いています

。記事 JavaScriptのさまざまな継承方法とメリット・デメリット。

注:

は「JavaScript Deep

オブジェクトの作成」と同じで、メモに似ています。

ねえ、もう一度ため息をつきましょう。「JavaScript Advanced Programming」は本当によく書かれています。

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

function Parent () {
  this.name = 'kevin';
}

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

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName()) // kevin
ログイン後にコピー

問題:

1.

参照typeのプロパティは、すべてのインスタンスによって共有されます。例: Childのインスタンスを作成するとき、次のようにします。パラメータを渡す

2.

コンストラクター

(古典的な継承)を借用する利点:

1. すべてのインスタンスによって共有される参照型属性を避けることができます2.子の中の親

例: 

function Parent () {
  this.names = ['kevin', 'daisy'];
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy", "yayu"]
ログイン後にコピー

短所:

メソッドはコンストラクターで定義され、インスタンスが作成されるたびにメソッドが作成されます。

3. 組み合わせ継承

プロトタイプチェーン継承とクラシック継承は二刀流を組み合わせたものです。 

function Parent () {
  this.names = ['kevin', 'daisy'];
}

function Child () {
  Parent.call(this);
}

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy"]
ログイン後にコピー

利点: プロトタイプ チェーンの継承とコンストラクターの利点を組み合わせた、JavaScript で最も一般的に使用される継承パターンです。

4. プロトタイプの継承

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

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

var child1 = new Child('kevin');

console.log(child1.name); // kevin

var child2 = new Child('daisy');

console.log(child2.name); // daisy
ログイン後にコピー

は、渡されたオブジェクトを作成されたオブジェクトのプロトタイプとして使用する、ES5 Object.create のシミュレートされた実装です。

欠点: 参照型を含む属性値は常に対応する値を共有します。これはプロトタイプチェーンの継承と同じです。 

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

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

function Child (name, age) {

  Parent.call(this, name);
  
  this.age = age;

}

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

child1.colors.push('black');

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]
ログイン後にコピー

注: 変更

は、プロトタイプの名前の値を変更するのではなく、名前の値を追加しました。

5. 寄生継承person1.name的值，person2.name的值并未发生改变，并不是因为person1和person2有独立的 name 值，而是因为person1.name = 'person1'，给person1

この関数は、継承プロセスをカプセル化するためにのみ使用される関数を作成し、内部的に何らかの形式でオブジェクトを返します。 

function createObj(o) {
  function F(){}
  F.prototype = o;
  return new F();
}
ログイン後にコピー

短所: 借用したコンストラクター パターンと同様に、オブジェクトが作成されるたびにメソッドが作成されます。

6. 寄生結合継承

皆さんが読みやすいように、結合継承のコードをここで繰り返します: 

var person = {
  name: 'kevin',
  friends: ['daisy', 'kelly']
}

var person1 = createObj(person);
var person2 = createObj(person);

person1.name = 'person1';
console.log(person2.name); // kevin

person1.firends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"]
ログイン後にコピー

結合継承の最大の欠点は、親コンストラクターが 2 回呼び出されることです。

サブタイプ インスタンスのプロトタイプを設定するときに 1 回: 

function createObj (o) {
  var clone = object.create(o);
  clone.sayName = function () {
    console.log('hi');
  }
  return clone;
}
ログイン後にコピー

サブタイプ インスタンスを作成するときに 1 回: 

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

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

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

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

console.log(child1)
ログイン後にコピー

new のシミュレーション実装を思い出してください。実際、この文では、次のように実行します: 

Child.prototype = new Parent();
ログイン後にコピー

ここでは、親コンストラクターを再度呼び出します。

つまり、この例では、child1 オブジェクトを出力すると、Child.prototype と child1 の両方に color という属性があり、その属性値は ['red', 'blue', 'green' であることがわかります。 ]。

では、今回はどうすれば改善を続け、繰り返しの呼び出しを回避できるでしょうか?

Child.prototype = new Parent() を使用せず、間接的に Child.prototype が Parent.prototype にアクセスできるようにしたらどうなるでしょうか?

それを実装する方法を見てみましょう: 

var child1 = new Child('kevin', '18');
ログイン後にコピー

最後に、この継承メソッドをカプセル化しましょう: 

Parent.call(this, name);
ログイン後にコピー

「JavaScript 高度なプログラミング」の寄生結合継承の賞賛を引用します:

このメソッドの効率の高さは、呼び出しのみであることを反映しています。 Parent コンストラクターは一度作成されるため、Parent.prototype に不要で冗長なプロパティが作成されることが回避されます。同時に、プロトタイプ チェーンは変更されないため、instanceof と isPrototypeOf は通常どおり使用できます。開発者は一般に、寄生構成継承が参照型にとって最も理想的な継承パラダイムであると信じています。

以上がJavaScript 継承のさまざまな方法とその長所と短所の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
JavaScript，继承，优缺点
ソース：php.cn
前の記事：JS は画像のプリロード関数コードを順不同で実現します 次の記事：WeChat アプレットでは JavaScript コールバック関数が使用されています (写真)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1905
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2078
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1747
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1649
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1658
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート