jsのさまざまな継承方法とメリット・デメリットを紹介-jsチュートリアル-php.cn

jsのさまざまな継承方法とメリット・デメリットを紹介

零下一度

リリース： 2017-05-13 10:51:57

オリジナル

1507 人が閲覧しました

この記事では、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のプロパティは、すべてのインスタンスによって共有されます。例:

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"]

ログイン後にコピー

2。子、親にパラメータを渡すことはできません

2. コンストラクターを借用します

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"]

ログイン後にコピー

利点:

1. すべてのインスタンスで共有される参照型属性を回避します

2。子親でパラメーターを渡す

例:

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

ログイン後にコピー

欠点:

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

3. 組み合わせ継承

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

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"]

ログイン後にコピー

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

4. プロトタイプの継承

function createObj(o) {
  function F(){}
  F.prototype = o;
  return new F();
}

ログイン後にコピー

は、渡されたオブジェクトを作成されたオブジェクトのプロトタイプとして使用する、ES5

Object

.create のシミュレートされた実装です。欠点:

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

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"]

ログイン後にコピー

注: 変更

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

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

5. 寄生継承

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

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

ログイン後にコピー

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

6. 寄生結合継承

誰でも読みやすくするために、結合継承のコードをここで繰り返します:

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)

ログイン後にコピー

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

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

Child.prototype = new Parent();

ログイン後にコピー

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

var child1 = new Child(&#39;kevin&#39;, &#39;18&#39;);

ログイン後にコピー

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

Parent.call(this, name);

ログイン後にコピー

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

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

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

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

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

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;
}
// 关键的三步
var F = function () {};

F.prototype = Parent.prototype;

Child.prototype = new F();


var child1 = new Child(&#39;kevin&#39;, &#39;18&#39;);

console.log(child1);

ログイン後にコピー

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

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

function prototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

// 当我们使用的时候：
prototype(Child, Parent);

ログイン後にコピー

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

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

【関連の推奨事項】

特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード2.

無料の js オンラインビデオチュートリアル

3. Jiijian (3) - JavaScript ビデオチュートリアル

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