Javascript を理解する_05_プロトタイプ継承の原則_JavaScript スキル

プロトタイプと [[プロトタイプ]]

顔オブジェクトの基本に基づいて、コードを見てみましょう:

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

//Animal コンストラクター
function Animal(name){
this.name = name;
/ /Animal プロトタイプ Object
Animal.prototype = {
id:"Animal",
sleep:function(){
alert("sleep")
}
}

var Dog = new Animal("Wangcai");
alert(dog.name);//Wangcai
alert(dog.id);//Animal
dog.sleep()/ / sleep

対応する単純なメモリ割り当て構造図:

次に、このメモリ図の詳細を説明します:

まず第一に、 [[プロトタイプ]] とプロトタイプは同じものではないことを明確にしておきます。

まず、プロトタイプを見てみましょう。各関数オブジェクトには、オブジェクトのプロトタイプを表す、表示されるプロトタイプ属性があります。これは、関数オブジェクト (コンストラクター) によって作成されたオブジェクトを表します。この例と組み合わせると、Animal.prototype は Dog のプロトタイプであり、dog によって参照されるオブジェクトは、Animal.prototype によって参照されるオブジェクトからプロパティとメソッドを継承します。

各オブジェクトには [[Prototype]] という名前の内部プロパティがあり、対応するプロトタイプ オブジェクトを指します。この例では、犬の [[prototype]] は Animal.prototype を指します。ご存知のとおり、Animal.prototype もオブジェクトであるため、対応する [[prototype]] 属性も持たなければなりません。したがって、オブジェクトは、プロトタイプ チェーンの概念であるリンク リスト構造を形成します。補足: さまざまな JS エンジン実装者は、内部 [[Prototype]] 属性に任意の名前を付け、その可視性を設定できます。この属性は JS エンジン内でのみ使用されます。内部 [[Prototype]] には JS コードではアクセスできませんが (FireFox ではアクセスできます。Mozilla が公開しているため、名前は __proto__ です)、オブジェクトの isPrototypeOf() メソッドをテストに使用できることに注意してください。判定はプロトタイプチェーンで実行されます。

注: 関数オブジェクトの具体的な内容については、後続のブログ投稿で説明します。


属性アクセスの原則
obj.propName を使用してオブジェクトのプロパティにアクセスする場合は、以下の手順に従います (obj の内部 [[Prototype]] プロパティ名が__proto__):
1. obj に propName 属性がある場合は、その属性の値を返します。それ以外の場合は、
2. obj.__proto__ が null の場合は、未定義を返します。そうでない場合は、obj.__proto__.propName を返します。
メソッドの関数オブジェクトはオブジェクトの属性値であるため、オブジェクトの呼び出し方法は属性にアクセスする検索処理と同じです。
ヒント: 上記の手順は再帰的なプロセスを意味します。手順 3 では、obj.__proto__ も propName 属性の検索に使用されます。


Prototypeに基づく継承と共有です。 object1 のメソッド fn2 は object2 から派生したものであり、概念的には、object2 は object3 のメソッド fn2 をオーバーライドします。 JavaScript オブジェクトはすべて、プロトタイプ チェーンを通じて関連付けられている必要があります。最上位は Object です。つまり、オブジェクトはすべて Object 型から派生します。

結合は上記の理論です。プロトタイプ、[[prototype]]、プロトタイプ チェーン、および属性アクセスの関連点を明確に説明する、より複雑な例を見てみましょう。

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

//Animal コンストラクター

function Animal(name){
this .name = name;
}
//動物プロトタイプ オブジェクト
Animal.prototype = {
id:"Animal",
sleep:function(){
alert("sleep ");
}
}

function Human(name,age){
Animal.call(this,name);
this.age = age;
}

Human.prototype = new Animal();
Human.prototype.id = "人間";

Human.prototype.say = function(){
alert("皆さん、こんにちは。私の名前は " this.name "、私は " this.age "、そして私は " this.id);
}

//人間関連の呼び出し
var jxl = new Human('idiot',25);
alert(jxl.name);//馬鹿
alert(jxl.id);//人間
jxl.say();//こんにちは、私の名前はイディオムです、私は 25 歳で、人間です

alert(Animal.prototype.isPrototypeOf(jxl));//true
alert(Object.prototype.isPrototypeOf(jxl) ));//true


Based on the above code, can you draw the corresponding memory map? Okay, let's take a look:

Note: The root of prototype is Object.prototype, and the internal [[prototype]] attribute of object Object.prototype is null.
Actually, there are There are many things that can be said, but the principles are all in this picture. You can try to adjust the order of the code, such as placing Human.prototype.id = "Human"; in Human.prototype = new Animal(); Earlier, you can learn a lot by looking at the running results and explaining why.

I found that it is really perfect to show the details of the internal operation of the program through memory!