このように原型と原型の鎖を理解するのは比較的に簡単です.
3866 ワード
原型
JavaScriptには、プロトタイプとuタイプの2つのプロトタイプがあります.プロト注:ECMA-272第5版でこれを管理します.プロト[プロトタイプ]といいます
プロトタイプ属性:これは明示的なプロトタイプの属性で、関数だけがこの属性を持つ.プロト属性:これは各オブジェクトにある暗黙的なプロトタイプの属性で、そのオブジェクトを作成するコンストラクタのプロトタイプを指します.
関数とは?相手は何ですか
作成関数には①、functionのキーワードで②を定義し、new Functionを通じて関数を普通の関数とコンストラクターに分ける方法があります.両者の唯一の違いは呼び出しの方式が違っています.文法的には違いがありません.
原型を探る
prototype属性が関数特有であることを証明するためにプロト.すべての対象にあります.以下のコードをテストできます.
*注意:
undefinedと
nullは同じ対象ですが、原型がありません.なぜですか?JavaScriptでは、現在は一つの値しかないデータタイプが二つしかありません.それはundefinedとnull*です.
この二つのタイプは一つの値しかなく、方法がないので、プロトタイプが自然になくなってしまいます.
ある学友は聞いて、あのNaNか?NaNはNumberデータタイプのもので、対象となります.
プロト属性
プロトタイプチェーン:インスタンスとプロトタイプの間のリンク
まず一例を見てみます.
以下のコードも等価です.
方法を表すために探していますが、醜い絵を描きました.気にしないでください.
ある方法や属性を探す時、まず自分の対象から探す.もしないなら、構造関数を探しに行きます.ここではまだプロトタイプチェーンが使われていません.続いて、構造関数の原型を探しに行きます.この時は対象のAbcが_を通ります.プロト属性は次を探します.Objectオブジェクトの原型を探します.Objectオブジェクトはすべてのオブジェクトの父です.すべてのオブジェクトはObjectを継承しています.プロト属性はObjectのprototypeの最後の最後を見つけました.Objectのため.プロトnullを指しています.これがプロトタイプチェーンの端の最初のプロトタイプチェーンです.obj.uプロトAbcのプロトタイプにアクセスしました.
JavaScriptには、プロトタイプとuタイプの2つのプロトタイプがあります.プロト注:ECMA-272第5版でこれを管理します.プロト[プロトタイプ]といいます
プロトタイプ属性:これは明示的なプロトタイプの属性で、関数だけがこの属性を持つ.プロト属性:これは各オブジェクトにある暗黙的なプロトタイプの属性で、そのオブジェクトを作成するコンストラクタのプロトタイプを指します.
関数とは?相手は何ですか
作成関数には①、functionのキーワードで②を定義し、new Functionを通じて関数を普通の関数とコンストラクターに分ける方法があります.両者の唯一の違いは呼び出しの方式が違っています.文法的には違いがありません.
function normalFn(){} // ( )
function StructFn(){} // ( )
オブジェクトを作成する方法は様々ですが、従来の方法は構造関数によってオブジェクトを作成し、newキーワードを使用して作成できます.作成されたオブジェクトのインスタンスはconstrutorによって構造関数にアクセスできます.let obj = new StructFn() // obj
console.log(obj.constructor) // function normalFn(){}
JSでは、万物は対象であり、関数も対象であるが、関数は対象に対してより正確に定義されている.原型を探る
prototype属性が関数特有であることを証明するためにプロト.すべての対象にあります.以下のコードをテストできます.
function a(){}
console.log(a.prototype); // {constructor: ƒ}
console.log(a.__proto__); // ƒ () { [native code] }
let obj = new Object()
console.log(obj.prototype) // undefined
console.log(obj.__proto__) // {constructor: ƒ, __defineGetter__: ƒ, …}
オブジェクトの明示的な原型が見えます.undefinedです.*注意:
undefinedと
nullは同じ対象ですが、原型がありません.なぜですか?JavaScriptでは、現在は一つの値しかないデータタイプが二つしかありません.それはundefinedとnull*です.
この二つのタイプは一つの値しかなく、方法がないので、プロトタイプが自然になくなってしまいます.
ある学友は聞いて、あのNaNか?NaNはNumberデータタイプのもので、対象となります.
プロト属性
console.log(undefined.__proto__); // :Uncaught TypeError: Cannot read property '__proto__' of undefined
console.log(null.__proto__); // :Uncaught TypeError: Cannot read property '__proto__' of null
console.log(NaN.__proto__) ; // Number {0, constructor: ƒ, toExponential: ƒ, …}
コンストラクタはオブジェクトを作成します.何が発生しますか?1.
2. 。
3. this
4.
注意第二条を参照してください.新しく作成されたオブジェクトの陰的原型をその構造関数の明示的な原型、つまりオブジェクトに指します.prototype==構造関数.prototypefunction fn(){}
let obj = new fn();
console.log(obj.__proto__ === fn.prototype); // true
このように,構造関数にプロトタイプ法を追加すると,二つの方法でアクセスできます.fn.prototype.more = function(){console.log('fn-prototype-more')}
// 1、
fn.prototype.more()
// 2、
obj.__proto__.more()
原型チェーンプロトタイプチェーン:インスタンスとプロトタイプの間のリンク
まず一例を見てみます.
function Abc(){}
Abc.prototype.fn = function(){console.log("Abc-prototype-fn")};
let obj = new Abc()
obj.fn() // Abc-prototype-fn
上のコードから見えます.アーキテクチャー関数Abcとオブジェクトインスタンスobjはfnという方法がないので、オブジェクトobjがAbcのプロトタイプ方法にアクセスできるのは、プロトタイプチェーンを通じて探しています.プロトこのプロパティ以下のコードも等価です.
obj.fn() // Abc-prototype-fn
obj.__proto__.fn() // Abc-prototype-fn
複雑な例をもう一つ見てください.function Abc(){
this.fn = function(){console.log("Abc-fn")};
}
Abc.prototype.fn = function(){console.log("Abc-prototype-fn")};
Object.prototype.fn = function(){console.log("Object-fn")};
let obj = new Abc()
obj.fn = function(){console.log("obj-fn")};
obj.fn()
ここには4つの名前のfn関数があります.それぞれ:①、インスタンスオブジェクトobjの方法②、コンストラクタAbcの方法③、コンストラクタAbcプロトタイプ上の方法④、Obecjtオブジェクトプロトタイプ上の方法です.方法を表すために探していますが、醜い絵を描きました.気にしないでください.
ある方法や属性を探す時、まず自分の対象から探す.もしないなら、構造関数を探しに行きます.ここではまだプロトタイプチェーンが使われていません.続いて、構造関数の原型を探しに行きます.この時は対象のAbcが_を通ります.プロト属性は次を探します.Objectオブジェクトの原型を探します.Objectオブジェクトはすべてのオブジェクトの父です.すべてのオブジェクトはObjectを継承しています.プロト属性はObjectのprototypeの最後の最後を見つけました.Objectのため.プロトnullを指しています.これがプロトタイプチェーンの端の最初のプロトタイプチェーンです.obj.uプロトAbcのプロトタイプにアクセスしました.
console.log(obj.__proto__ === Abc.prototype) // true
第二のプロトタイプチェーンはobj._uプロト.proto_Objectのプロトタイプにアクセスしました.console.log(obj.__proto__.__proto__ === Object.prototype) //true
第三の原型チェーンはobj._uプロト.プロト.プロト.Objectのプロトタイプに訪問しました.proto_,最後はnullを指しましたconsole.log(obj.__proto__.__proto__.__proto__ === null) //true
これで私達は原型チェーン全体の流れを見ることができます.