JavaScript 継承のさまざまな方法とその長所と短所の詳細な紹介-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-05-14 10:12:02

オリジナル

1264 人が閲覧しました

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

前に書いています

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

注:

は「JavaScript Deep

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

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

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

function Parent () {
  this.name = &#39;kevin&#39;;
}

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

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName()) // kevin

ログイン後にコピー

問題:

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

コンストラクター

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

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

例:

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

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

child1.names.push(&#39;yayu&#39;);

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

var child2 = new Child();

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

ログイン後にコピー

短所:

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

3. 組み合わせ継承

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

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

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

var child1 = new Child();

child1.names.push(&#39;yayu&#39;);

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(&#39;kevin&#39;);

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

var child2 = new Child(&#39;daisy&#39;);

console.log(child2.name); // daisy

ログイン後にコピー

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

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

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

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(&#39;kevin&#39;, &#39;18&#39;);

child1.colors.push(&#39;black&#39;);

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

var child2 = new Child(&#39;daisy&#39;, &#39;20&#39;);

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: &#39;kevin&#39;,
  friends: [&#39;daisy&#39;, &#39;kelly&#39;]
}

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

person1.name = &#39;person1&#39;;
console.log(person2.name); // kevin

person1.firends.push(&#39;taylor&#39;);
console.log(person2.friends); // ["daisy", "kelly", "taylor"]

ログイン後にコピー

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

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

function createObj (o) {
  var clone = object.create(o);
  clone.sayName = function () {
    console.log(&#39;hi&#39;);
  }
  return clone;
}

ログイン後にコピー

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

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

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(&#39;kevin&#39;, &#39;18&#39;);

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(&#39;kevin&#39;, &#39;18&#39;);

ログイン後にコピー

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

Parent.call(this, name);

ログイン後にコピー

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

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

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