JavaScriptには多くの混oticとした関係があります。スコープチェーンは一元配置チェーンの関係であり、非常にシンプルで明確です。このメカニズムの呼び出し関係は少し複雑です。また、プロトタイプに関しては、プロトタイプ、プロト、コンストラクターの間の三角関係です。この記事では、最初に写真を使用して意味を明確にし、次にプロトタイプの三角形の関係を詳細に説明します。
図
コンセプト
上記の写真の複雑な関係は、実際には2行のコードから来ています
function foo(){}; var f1 = new foo;【コンストラクタ】
新しく作成されたオブジェクトの初期化に使用される関数は、コンストラクターです。この例では、FOO()関数はコンストラクターです
【インスタンスオブジェクト】
コンストラクターの新しい操作によって作成されたオブジェクトは、インスタンスオブジェクトです。 1つのコンストラクターを使用して、複数のインスタンスオブジェクトを構築できます
function foo(){}; var f1 = new foo; var f2 = new foo; console.log(f1 === f2); // false【プロトタイプオブジェクトとプロトタイプ】
コンストラクターには、インスタンスオブジェクトのプロトタイプオブジェクトを指すプロトタイププロパティがあります。同じコンストラクターによってインスタンス化された複数のオブジェクトには、同じプロトタイプオブジェクトがあります。プロトタイプオブジェクトを定期的に使用して継承を実現します
function foo(){}; foo.prototype.a = 1; var f1 = new foo; var f2 = new foo; console.log(foo.prototype.a); // 1console.log(f1.a); // 1console.log(f2.a);【コンストラクタ】
プロトタイプオブジェクトには、プロトタイプオブジェクトに対応するコンストラクター関数を指すコンストラクター属性があります。
function foo(){}; console.log(foo.prototype.constructor === foo); // trueインスタンスオブジェクトはプロトタイプオブジェクトのプロパティを継承できるため、インスタンスオブジェクトにはコンストラクター属性もあり、プロトタイプオブジェクトに対応するコンストラクター関数も指します。
function foo(){}; var f1 = new foo; console.log(f1.constructor === foo); // true【proto】
インスタンスオブジェクトには、インスタンスオブジェクトに対応するプロトタイプオブジェクトを指すプロト属性があります
function foo(){}; var f1 = new foo; console.log(f1 .__ proto__ === foo.prototype); // true説明します
概念が導入されており、今度は関係を詳細に説明します。
function foo(){}; var f1 = new foo;【パート1:foo】
インスタンスオブジェクトF1は、コンストラクターFOO()の新しい操作によって作成されます。コンストラクターfoo()のプロトタイプオブジェクトはfoo.prototypeです。インスタンスオブジェクトF1は、__Proto__属性を介してプロトタイプオブジェクトfoo.prototypeを指します。
function foo(){}; var f1 = new foo; console.log(f1 .__ proto === foo.prototype); // trueインスタンスオブジェクトF1自体にはコンストラクター属性がありませんが、プロトタイプオブジェクトFoo.prototypeのコンストラクター属性を継承できます。
function foo(){}; var f1 = new foo; console.log(foo.prototype.constructor === foo); // trueconsole.log(f1.constructor === foo); // trueconsole.log(f1.hasownporperty( 'Constructionor'); // false false次の図は、インスタンスオブジェクトF1のコンソール効果を示しています
【パート2:オブジェクト】
foo.prototypeはF1のプロトタイプオブジェクトであり、インスタンスオブジェクトでもあります。実際、すべてのオブジェクトは、オブジェクト()コンストラクターの新しい操作を通じてインスタンス化されたオブジェクトと見なすことができます。したがって、foo.prototypeはインスタンスオブジェクトであり、そのコンストラクターはオブジェクト()であり、プロトタイプオブジェクトはobject.prototypeです。したがって、コンストラクターオブジェクト()のプロトタイププロパティは、プロトタイプオブジェクトオブジェクトを指します。インスタンスオブジェクトfoo.prototypeのプロトプロパティもプロトタイプオブジェクトを指しています
function foo(){}; var f1 = new foo; console.log(foo.prototype .__ proto__ === object.prototype); // trueインスタンスオブジェクトfoo.prototype自体にはコンストラクター属性があるため、プロトタイプオブジェクトから継承されたコンストラクター属性をオーバーライドします。プロトタイプ
function foo(){}; var f1 = new foo; console.log(foo.prototype.constructor === foo); // trueconsole.log(object.prototype.constructor === object); // trueconsole.log(foo.prototype.hasownproperty( 'constructor')); // trueconsole.log(foo.prototype.hasownproperty( 'constructor')); // true次の図は、インスタンスオブジェクトfoo.prototypeのコンソール効果を示しています
Object.Prototypeがインスタンスオブジェクトである場合、そのプロトタイプオブジェクトは何ですか?結果はnullです。これは、「オブジェクト」の理由の1つであるTypeof Nullの結果であると思います。
console.log(object.prototype .__ proto__ === null); // true
【パート3:機能】
前述のように、関数はオブジェクトですが、特別な関数を持つオブジェクトです。任意の関数は、関数()コンストラクターの新しい操作によるインスタンス化の結果と見なすことができます。
関数fooがインスタンスオブジェクトと見なされる場合、そのコンストラクターはfunction()であり、そのプロトタイプオブジェクトはfunction.prototypeです。同様に、関数オブジェクトのコンストラクターもfunction()であり、そのプロトタイプオブジェクトはfunction.prototypeです。
function foo(){}; var f1 = new foo; console.log(foo .__ proto__ === function.prototype); // trueconsole.log(object .__ proto__ === function.prototype); // trueプロトタイプオブジェクトfunction.prototypeのコンストラクター属性は、コンストラクター関数()を指します。インスタンスオブジェクトオブジェクトとfooにはコンストラクター属性がありません。また、プロトタイプオブジェクトfunction.prototypeのコンストラクター属性を継承する必要があります。
function foo(){}; var f1 = new foo; console.log(function.prototype.constructor === function); // trueconsole.log(foo.constructor === function); // trueconsole.log(foo.hasownporty( 'construstutor'); function); // trueconsole.log(object.hasownproperty( 'constructor')); // falseすべての関数は、コンストラクター関数()の新しい操作のインスタンス化されたオブジェクトと見なすことができます。次に、関数は、独自の新しい操作インスタンス化を呼び出す結果と見なすことができます。
したがって、関数がインスタンスオブジェクトである場合、そのコンストラクターは関数であり、そのプロトタイプオブジェクトはfunction.prototypeです
console.log(function .__ proto__ === function.prototype); // trueconsole.log(function.prototype.constructor === function); // trueconsole.log(function.prototype === function); // trueconsole.log(function.log.log(function.loge == = unfunce); // true
function.prototypeがインスタンスオブジェクトである場合、そのプロトタイプオブジェクトは何ですか?前と同様に、すべてのオブジェクトは、オブジェクト()コンストラクターの新しい操作のインスタンス化結果と見なすことができます。したがって、function.prototypeのプロトタイプオブジェクトはobject.prototypeであり、そのプロトタイプ関数はobject()です
console.log(function.prototype .__ proto__ === object.prototype); // true
2番目の部分では、オブジェクトのプロトタイプオブジェクトがnullであることを紹介します
console.log(object.prototype .__ proto__ === null); // true
要約します
【1】関数(関数も関数)は新しい関数の結果であるため、関数はインスタンスオブジェクトとして使用できます。
【2】オブジェクト(関数はオブジェクトでもあります)は新しいオブジェクトの結果であるため、オブジェクトはインスタンスオブジェクトとして使用でき、そのコンストラクターはオブジェクト()、プロトタイプオブジェクトはobject.prototypeです。
【3】オブジェクト。プロトタイプのプロトタイプオブジェクトはnullです