JavaScriptのプロトタイプチェーンを深く理解する_基礎知識

プロトタイプ チェーンを理解するには、まず関数の型を理解する必要があります。JavaScript にはクラスの概念はなく、すべて関数であるため、関数型プログラミング言語となります。クラスの非常に重要な機能は、コンストラクターに基づいてテンプレートとしてオブジェクトを作成できることです。 JavaScript では、関数には 2 つの関数があります

まず、一般的な関数呼び出しとして
第 2 に、プロトタイプ オブジェクトのコンストラクターとして、 new()

例を見てみましょう

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

function a(){
this . name = 'a';
}

関数を作成するとどうなりますか?

最初に、それ自体である関数オブジェクトを作成します。

2 番目に、プロトタイプ オブジェクト @a (@ で表されます) を作成します。

3 番目に、関数オブジェクトは、対応するプロトタイプ オブジェクトを指すプロトタイプ ポインターを持ちます。ここでは @a

を指します。 4 番目に、@a オブジェクトにはコンストラクター ポインターがあり、そのコンストラクターを指します。ここでは 0/ を指します。重力/南東

このプロトタイプ属性は何に使用されますか?

実際、prototype 属性は、現在の関数が制御できる範囲を示します (または、現在の関数が誰のコンストラクターであるかを示します)。ここで a は @a プロトタイプ オブジェクトのコンストラクターであるため、これを確認します。書き方

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

function a( ){

this .name = 'a';
}

var a1 = new a();

これは他の一般的な言語と似ています新しいのはプロトタイプを呼び出すことです。オブジェクト内のコンストラクターは (プロトタイプ ポインターを介して) 新しいオブジェクト インスタンスを作成します。

次に、プロトタイプが指すオブジェクトの属性を変更すると、それをテンプレートとして使用して作成されたすべてのインスタンスに影響します。

を確認できます。コードをコピーします コードは次のとおりです。

function a(){

this.name =
}

var a1 = new a();
a.prototype.age = 1;


結果: 1

なぜ a1 オブジェクトは age 属性に直接アクセスできるのでしょうか? a1 オブジェクトに age 属性を定義しませんでした。

これは、すべてのインスタンスがこのプロトタイプを指す参照 _proto_ (firrix および chrome での直接アクセス、ie ではサポートされていない) を持つためです。 @a,

コードをコピー コードは次のとおりです。 function a(){

this.name = 'a';

}

var a1 = new a()
alert(a1._proto_ == a.prototype)


結果: true

属性にアクセスするときは、まず a1 オブジェクト内を検索します。そうでない場合は、_proto_ で指定されたオブジェクトに沿って検索し、それを返します。値が見つからない場合は、未定義が返されます。これをイディオムで説明すると、単に手がかりに従っているだけです。

ここでプロトタイプチェーンの意味が出てきます。プロトタイプオブジェクトも_proto_ポインタを持っているので、次々と別のプロトタイプを指し、プロトタイプチェーンを形成します。 Object.prototype はトップレベルのプロトタイプであるため、Object.prototype のプロパティが変更されると、すべてのオブジェクトに影響します。

コードを見てみましょう

コードをコピーします コードは次のとおりです: 関数 a(){

this.name = 'a';

}

関数 b(){
this.age = 1; 🎜>
b .prototype = new a();
alert(new b().name);


b のプロトタイプが a のインスタンスを明示的に指すようにします。次に、b のインスタンスにもアクセスできます。a のプロパティにもアクセスできます。これは JavaScript の継承ですが、なぜ b.prototype は a.prototype を直接指すのではなく、 a のインスタンスを指すのでしょうか?

コードをコピー

コードは次のとおりです。 b.prototype = new a.prototype;
上記のように p.prototype の属性を変更すると、 a のプロトタイプも変更され、サブクラスが親クラスを変更するのと同じになり、サブクラスと親クラスの属性がブレンドされます。これは明らかに不適切です。つまり、b は @a のコンストラクターにもなり、a と b は同等の関係になります。

次のように定義できます。

関数 a は、関数 a を関数 b のプロトタイプのインスタンスにするコンストラクターである関数 b を継承します。コンストラクターで宣言された属性は関数 a です。 own 、プロトタイプ インスタンスの属性は b から継承されます

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

var $ = jQuery = function(selector,context){
//独自のコンストラクターで再度構築することは不可能なので、別のコンストラクターのインスタンスが返されます
return new init(selector,context) );
}
jQuery.fn = jQuery.prototype = {
size:function(){
return this.length>}
}

関数init (selector ,context){

}
init.prototype = jQuery.fn;;
}

これは jquery を使用した場合のソースコードです。 jquery、 new キーワードが使用されていないのですが、オブジェクトはどのように構築されるのでしょうか?

上記の知識を使用すると、jquery は単なる一般的な関数呼び出しであり、jquery プロトタイプの別のコンストラクター (new init()) によって作成されたオブジェクトを返すものであると説明できます。