JSの継承 ～プロトタイプチェーンの継承とクラスの継承～基礎知識

継承とは何ですか?回答: 他人がそれをあなたに無料で与えるプロセスは、相続と呼ばれます。

なぜ継承を使用するのでしょうか?答え: 既製のものを手に入れるだけです。

そうですね、誰もがすでに利用可能なものを使いたいので、それを継承する方法を学ぶ必要があります。

理解する前に、コンストラクター、オブジェクト、プロトタイプ チェーン...

などの概念を理解する必要があります。

JS で一般的に使用される 2 つの継承メソッド:

プロトタイプチェーンの継承（オブジェクト間の継承） クラスの継承（コンストラクタ間の継承）

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

コードをコピー コードは次のとおりです:

//継承されるオブジェクト
varparent= {
name : "baba"
say : function(){
alert("I am baba");
}
}

//新しいオブジェクト
var child = proInherit(parent);

//Test
alert(child.name); //"baba"
child.say(); //"私は baba"

proInherit (obj) メソッドを使用してオブジェクトを渡し、オブジェクトの属性とメソッドの継承を実現します。このメソッドは組み込みメソッドではないため、自分で定義する必要があります。

コードをコピー コードは次のとおりです。

function proInherit(obj){
function F () {}
F.prototype = obj ;
return new F();
}

ここで、F() は一時的な空のコンストラクターであり、F() のプロトタイプは親オブジェクトとして設定されますが、同時に _proto_ リンクの恩恵を受けることで親オブジェクトのすべての機能を持ちます。

チェーン図:

クラス継承:

コードをコピー コードは次のとおりです:

//親クラスのコンストラクター
関数Parent( ) {
this.name = "baba";
}
//親クラスのプロトタイプ メソッド
Parent.prototype.getName = function () {
return this.name;
}

//サブクラス コンストラクター
function Child() {
this.name = "cc";
}

//クラス継承
classInherit(Parent, Child);

//Instance
var child = new Child();
alert(child.getName()) //“baba”

継承の主要なメソッドを見てみましょう: classInherit(Parent,Child)

コードをコピー コードは次のとおりです。

var classInherit = (function () {
var F = function () { }
return function (P, C) {
F.prototype = P.プロトタイプ;
C.prototype = new F();
C.prototype.constructor = C;
}
}());

このメソッドを分析します:

まず、空のコンストラクター F() を作成し、そのインスタンスの _proto_ 属性を使用して、親クラスとサブクラスのプロトタイプ チェーンを構築します。これは、サブクラスがインスタンス化された後に親クラスと一緒にプロパティまたはメソッドを変更する C.prototype = P.prototype を防ぐプロキシとして機能します。インスタント関数とクロージャ内での F() の格納を全体的に使用することで、多重継承中に多数の空のコンストラクターが作成されるのを防ぎ、メモリ消費量を削減します。最後の行は、プロトタイプ チェーンにより、C のインスタンス オブジェクトのコンストラクターが P を指すため、リセットされることを意味します。

チェーン図:

このメソッドはインスタンス時にプロトタイプメソッドを継承しますが、親クラスの属性は継承できません。 以下はクラス継承の補足である

コピー継承

です。

継承のコピー:

コードをコピー コードは次のとおりです:

//継承をコピー
function copyInherit(p, c) {
var i,
toStr = Object.prototype.toString,
astr = "[オブジェクト配列]";
c = c ||
for (i in p) {
if (p.hasOwnProperty(i)) {
if (typeof p[i] === "オブジェクト" ) {
c[i] = toStr.call(p[i]) == astr ? [] : {};
c[i] = copy(p[i], c[i]);
}
else {
c[i] = p[i];
}
}
}
return c;
}

//親を書き換えます
function Parent() {
this.name = "pp";
this.obj= {a:1,b:2};
this.arr = [1, 2]
}
//インスタンス
var child = new Child();
varparent = new Parent();
copyInherit(parent, child);
alert(child.name) //"baba"
alert(child.arr) //1,2
alert(child.obj.a) //1

copyInherit(p,c) を分析します

変数に値を割り当てる場合、値渡しと参照渡しの 2 つの方法があります。親オブジェクトの属性に配列型またはオブジェクト型が含まれる場合、c[i] = toStr.call(p[ i] ) == astr ? [] : {}; この文は、子オブジェクトのプロパティを変更するときに親オブジェクトのプロパティが改ざんされるのを防ぎます。

概要:

このコンストラクター メソッドは誰もがよく知っているため、クラス継承の方が一般的ですが、大量のメモリを消費します。プロトタイプの継承は使用するメモリの量が少なくなりますが、配列やオブジェクト型のクローンを作成するのはより面倒です。コピーの継承はシンプルで広く使用されています。