この記事では、JavaScript継承メカニズムについて説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
初心者がJavaScript言語の継承メカニズムを理解することは一般に困難です。 「サブクラス」と「親クラス」の概念はなく、「クラス」と「インスタンス」の区別もありません。継承を達成するために、非常に奇妙な「プロトタイプチェーン」モデルに完全に依存しています。
私はこの部分を勉強し、多くのメモをとるのに多くの時間を費やしました。しかし、それらはすべて強制記憶であり、根本的に理解することはできません。
1.クラスの作成方法
次のように人と呼ばれるクラスがあるとします:
次のようにコードをコピーします:var person = function(name、age){
this.name = name;
this.age = age;
}
person.prototype.getName = function(){
this.nameを返します。
}
上記のように、人は地球上のすべての人々を表し、誰もがこれらの2つの基本的な属性を持っています。名前と年齢。今、私たちは学生クラスを実装したいと考えています。学生も人であり、学生は名前や年齢などの属性も持っています。問題は、この関係をどのように構築できるかということです。
まず、純粋なオブジェクト指向言語がどのようにそれを行うかを見てみましょう(actionscript3など)
次のようにコードをコピーします。クラスの学生は人を拡張します{}; //非常にシンプルで、コードの1行です。より正確に言うと、1つの単語 - 拡張します
2。JSに変更した場合はどうすればよいですか
JS継承メカニズムの実装を説明する前に、まずJSのプロトタイプチェーンを理解しましょう。
コードコピーは次のとおりです。varperson = new person( 'poied-flw'、21);
person.getName(); // "Poied-flw"
上記のgetName()メソッドについては、どのように実行されますか?まず、人関数にgetName()メソッドがあるかどうかを見つけて、NOを見つけます。次に、person.prototypeに移動して検索して、あることがわかります!それからそれを呼びます、それがそうしないとしたら?同じ方法に従って、メソッドを見つけるか、プロトタイプチェーンの上部に到達するまでプロトタイプに沿って検索し続けてください!
たとえば、現在、犬のオブジェクトのプロトタイプを表す犬と呼ばれるコンストラクターがあります。
次のようにコードをコピーします:function dog(name){
this.name = name;
}
このコンストラクターにnewを使用すると、犬のオブジェクトのインスタンスが生成されます。
コードコピーは次のとおりです。VARDOGA= New Dog( 'Big Hair');
アラート(doga.name); //大きな髪
新しく作成されたインスタンスオブジェクトを表すコンストラクターのこのキーワードに注意してください。
3。新しいオペレーターの短所
コンストラクターを使用してインスタンスオブジェクト、つまり属性とメソッドを共有する機能を生成することには、1つの欠点があります。
たとえば、犬のオブジェクトのコンストラクターで、インスタンスオブジェクトの共通属性種を設定します。
次のようにコードをコピーします:function dog(name){
this.name = name;
this.species = 'canidae';
}
次に、2つのインスタンスオブジェクトが生成されます。
コードコピーは次のとおりです。VARDOGA= New Dog( 'Big Hair');
var dogb = new Dog( 'eimao');
これら2つのオブジェクトの種の属性は独立しているため、1つは他方に影響しません。
コードコピーは次のとおりです。DOGA.SPECIES= 'Female';
アラート(dogb.species); // Dogaの影響を受けない「Canine Family」を表示します
各インスタンスオブジェクトには、プロパティとメソッドの独自のコピーがあります。これはデータを共有できないだけでなく、リソースの膨大な無駄でもあります。
SO:継承のアイデア:JSのユニークなプロトタイプチェーンを介して継承メカニズムを実装してください!
4。プロトタイプチェーンに基づく継承
1。直接的な継承と実装
次のようにコードをコピーします:var学生= function(name、age、sid){
person.call(this、name、age);
this.sid = sid;
}
sustent.prototype = new person(); //継承メカニズムを実装するために、学生のプロトタイプチェーンに人を置く
Student.prototype.constructor = dustom;
desusent.prototype.getResults = function(){
//生徒の成績を取得します
}
学生を見逃さないようにする必要があります。prototype.constructor=学生ライン! 、コンストラクターを定義するとき、そのデフォルトのプロトタイプはオブジェクトインスタンスであり、プロトタイプのコンストラクター属性が関数自体に自動的に設定されます! ! !プロトタイプが別のオブジェクトに手動で設定されている場合、新しいオブジェクトは当然、元のオブジェクトのコンストラクター値を持たないため、コンストラクター属性をリセットする必要があります。のように:
次のようにコードをコピーします:var test = function(){
this.time = "now";
}
console.log(test.prototype); //オブジェクト{}空のオブジェクト
console.log(test.prototype.constructor); // function(){this.time = "now";}、および関数自体
//テストのプロトタイププロパティを手動で変更した場合
test.prototype = {
somefunc:function(){
console.log( 'Hello World!');
}
};
console.log(test.prototype.constructor); // function object(){[ネイティブコード]}
//次に、ポインティングが完全に間違っていることがわかります。したがって、プロトタイププロパティを手動で変更するときは、コンストラクターのポインティングを変更する必要があります。
上記のテストの後、コンストラクターの値を変更する必要がある理由がわかります。
2。継承された関数の拡張をカプセル化します
次のようにコードをコピーします。関数拡張(サブクラス、スーパークラス){
var f = function(){};
f.prototype = superclass.prototype;
subclass.prototype = new f();
subclass.prototype.constructor = subclass;
}
実際、この関数の関数は、上記の相続プロセスのカプセル化にすぎないものであり、違いは次のとおりです。
スーパークラスのプロトタイプ属性のみを継承し、スーパークラスコンストラクターの属性を継承しません。
これの利点は、新しいコンストラクターのオーバーヘッドを減らすことです!
もちろん、その後の問題は、この関数を単純に渡して、サブクラスがスーパークラスのすべてのプロパティを継承できるようにすることができないことです。
改善する:
次のようにコードをコピーします。
person.call(this、name、age);
5。概要
JSのプロトタイプチェーンの原則を使用して、JS継承メカニズムを簡単に実装できます。それはそれほど厳格ではありませんが、私の目標は達成されました。一度繰り返しコードを表示してみてください!
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。