記事あなたは完全にJSのプロトタイプチェーンを理解するように、

序文

JavaScriptはプロトタイプ件名、プロトタイプの概念は複数の関連プロパティになります理解することはより困難「[[プロトタイプ]]」属性で、関数オブジェクトは、「プロトタイプ」属性を持つ、プロトタイプオブジェクトは、「コンストラクタ」プロパティがあります。

理解プロトタイプ（試作品が何でありますか）

導入のプロトタイプを開始する前に、我々は最初のプロトタイプが何であるかについて話しますか？

定義

JavaScriptでは、によって達成することができるオブジェクトのプロトタイプ継承属性は、JavaScriptのオブジェクトがに含まれるオブジェクトのプロトタイプである「は、[[プロトタイプ]」プロトタイプオブジェクトに対応する内部プロパティ。「[[プロトタイプ]」オブジェクトの内部プロパティとして直接アクセスすることはできません。すべてのオブジェクトのプロトタイプを簡単に表示するために、Chromeと他の主要ブラウザベンダーは、この訪問は、非標準（「Object.getPrototype（オブジェクト）」アクセサ導入ECMA標準オブジェクトのプロトタイプ）である「__proto__」を提供します

ケーススタディ

    function Animal(name, type) {
        this.name = name;
        this.type = type;
        this.getInfo = function(){
            console.info("当前动物属性==>",this.name   'is'   this.type)
        }
    }
    let dog = new Animal("狗", "犬科哺乳动物") // 当前动物属性==> 狗is犬科哺乳动物

ステップ - > 1：プロトタイプオブジェクトの犬のビュー

    console.info("__proto__",dog.__proto__);
    // __proto__ Objectconstructor: ƒ Animal(name, type)__proto__:
    console.info("constructor=====>",dog.constructor)
     //constructor=====> ƒ Animal(name, type) {
     //       this.name = name;
     //       this.type = type;
     //       this.getInfo = function(){
    //      console.info("当前动物属性==>",this.name   'is'       this.type)

分析の結果

• 「動物{}」犬オブジェクトプロトタイプ、デプロイメントがクロムにより見ることができるされる、「動物{}」プロトタイプオブジェクトとして、ある「プロト」属性（プロトタイププロトタイプに対応）
• このコードでは、また、「コンストラクタ」プロパティを使用していました。JavaScriptをオブジェクトのプロトタイプオブジェクトで。また、「コンストラクタ」属性、プロトタイプコンストラクタのすべてのインスタンスを作成するために、対応する点が含まれています

    // 拓展 可以判断一个对象是不是数组类型
    function isArray(arr){
        return arr.constructor.toString().indexOf("Array") > -1;
    }

*ここでは、犬オブジェクト自体は、「コンストラクタ」プロパティの犬（犬.__ proto__）の原型であるプロトタイプチェーンを通じてこのプロパティの「コンストラクタ」が、見た目ではなく、動物の機能を発見しました

ステップ- > 2：ビューが（犬。プロトタイプ犬オブジェクトプロトプロトタイプ）の

犬のプロトタイプ「動物{}」オブジェクトであるので、我々はまた、プロトタイプの犬を見ることができる（犬。プロト）プロトタイプ

    console.info(dog.__proto__ === Animal.prototype)
    console.info(Animal.prototype.__proto__)
    console.info(Animal.prototype.constructor)
    console.info(Animal.prototype.constructor === Animal)

分析の結果

• 初見「犬。プロト === Animal.prototype」は、JavaScriptで、各関数は、関数は、インスタンスコンストラクタを作成するために使用されたプロトタイプのプロパティがあり、関数のprototypeプロパティの値は、プロトタイプのようになります。 （すなわち、例を設定するために、すべてのオブジェクトインスタンスに割り当てられたプロト性）、すなわち、すべてのインスタンスのプロトタイプは、関数プロトタイププロパティで引用されました。後コンストラクタのprototypeプロパティをご覧ください。最初の文が真である理由のいくつかを理解します
• ときに「Animal.prototype。によるプロト犬オブジェクトプロトタイププロトタイプ時間を取得する」声明、あなたは「オブジェクト{}」オブジェクトは、「オブジェクト{}」オブジェクトへの以降のすべてのオブジェクトのプロトタイプを追跡している背中を見ることになるでしょう。
• プロトタイプオブジェクト「コンストラクタ」以上の説明から「Animal.prototype」オブジェクトのために、動物は、機能自体に対応します。

「Animal.prototype」アニマル「はコンストラクタ」と「プロトタイプ」プロパティによって参照される各関数オブジェクトをオブジェクトと実装、上から見ることができます

ステップ - > 3：ビューオブジェクトのプロトタイプオブジェクト

前部を通して見ることができる、プロトタイプは、プロトタイプ意志「オブジェクト{}」オブジェクトです。実際には、JavaScriptで、すべてのオブジェクトのプロトタイプは、「オブジェクト{}」オブジェクトにさかのぼるれます。コードで見る「オブジェクト{}」オブジェクトましょう：

    console.log(Animal.prototype.__proto__ === Object.prototype);
    console.log(typeof Object);
    console.log(Object);
    console.log(Object.prototype);
    console.log(Object.prototype.__proto__);
    console.log(Object.prototype.constructor);

分析の結果

• Objectオブジェクト自体は、関数オブジェクトです。
• それはオブジェクト関数であるので、あなたが値を見ることができるので、それは確かに、prototypeプロパティになります「のObject.prototypeは、」「オブジェクト{}」プロトタイプオブジェクトです。
• 逆に、このプロパティの訪問「のObject.prototype」オブジェクト「コンストラクタ」は、あなたがObejct機能を得るとき。
• さらに、場合「のObject.prototype。介してプロト時間の取得オブジェクトプロトタイププロトタイプ」が「オブジェクト{}」プロトタイププロトタイプオブジェクトは、鎖の末端である「NULL」であろう。

ステップ - > 4：目的関数のプロトタイプをチェック

上記の例では、動物は、JavaScriptでコンストラクタ関数は、したがって、我々はまた、「缶、オブジェクトであるプロト属性関数のプロトタイプ動物のオブジェクトを見つけるために」。

    console.log(Animal.__proto__ === Function.prototype);
    console.log(Animal.constructor === Function)
    console.log(typeof Function);
    console.log(Function);
    console.log(Function.prototype);
    console.log(Function.prototype.__proto__);
    console.log(Function.prototype.constructor);

分析の結果

• JavaScriptオブジェクト（同様のオブジェクト）に機能があり、オブジェクト自体は関数であり、（の（機能、オブジェクトを含む）すべての関数のプロトタイププロトは）「Function.prototype」です。
• 関数オブジェクトは、関数のように、「（）{}関数」オブジェクトに対応するプロトタイプの属性が存在することになります。
• オブジェクトとしてFunctionオブジェクト、「があるプロト、と言うことです「Function.prototype」に対応する」属性「機能。プロト === Function.prototypeは」
• 関数プロトタイプオブジェクト「Function.prototype」、「プロトタイプオブジェクトのためのプロト「オブジェクト{}」に対応する」属性

コントラストプロトタイプとプロト

「プロトタイプ」と「のプロトこれら二つの特性は時々混同されてもよい」、「Person.prototype」と「人。プロトは、」完全に異なっています。

ここでは、「プロトタイプ」と「上のプロト」の簡単な紹介：

• オブジェクトのすべてのためのものであるプロトのオブジェクトのプロトタイプであるべき属性
• 加算関数オブジェクトに対するプロト機能をインスタンスコンストラクタを作成するために使用される特性に加えて、ならびにプロトタイププロパティ、すべてのオブジェクトインスタンスのプロトタイプの（すなわち、設定例として割り当てる関数のプロトタイププロパティ値プロトプロパティ）

次のように図について要約：

• すべてのオブジェクトが持っている「プロトオブジェクトのプロトタイプでなければなりません」属性、
• すべてのオブジェクトは、関数「プロトタイプ」プロパティを持って、プロパティの値は、この機能は「作成したオブジェクトに割り当てられますプロト」プロパティを
• すべてのプロトタイプオブジェクトはプロトタイプのインスタンスコンストラクタのすべての対応する点を作成し、「コンストラクタ」属性を持っています
• 「プロトタイプ」と「コンストラクタ」プロパティを介して相互に関連付けられたプロトタイプ関数オブジェクトとオブジェクト
• 各オブジェクトは、プロトタイプとプロトタイプ、尖ったオブジェクトの親のプロトタイプ、および親の親のプロトタイプ点の親を持っているので、プロトタイプ接続層は、プロトタイプチェーンを構成しています。

hasOwnProperty

「hasOwnPropertyを」JavaScriptが唯一の財産であるが、処理機能のプロトタイプチェーンを見つけることができませんので、「hasOwnPropertyを」方法「のObject.prototype」は、この方法では、オブジェクトではなく、プロトタイプチェーンのプロパティのカスタムプロパティが含まれているかどうかを判断することができます。

私たちは、このプロパティの犬「コンストラクタ」を介してアクセスおよびコンストラクタ動物の犬を取得することができ、あなたは記事の例の始まりを覚えて信じています。「hasOwnPropertyを」あなたが見ることができるこの機能、犬のオブジェクトではなく、このプロパティの「コンストラクタ」ここで組み合わせました。

次の出力から見ることができ、「コンストラクタは」プロトタイプの犬（犬。あるプロト）プロパティが、プロトタイプチェーン、犬、およびオブジェクトを見つけることによって、「コンストラクタ」プロパティを使用して見つけることができます。

「hasOwnPropertyを」もう一つの重要な利用シナリオは、オブジェクトのプロパティをトラバースするために使用されます。

function Person(name, age){
    this.name = name;
    this.age = age;
}

Person.prototype.getInfo = function(){
    console.log(this.name   " is "   this.age   " years old");
};


var will = new Person("Will", 28);

for(var attr in will){
    console.log(attr);
}
// name
// age
// getInfo

for(var attr in will){
    if(will.hasOwnProperty(attr)){
        console.log(attr);
    }
}
// name
// age

概要

このホワイトペーパーでは、次の点のいくつかをまとめることができプロトタイプに関連するJavaScriptのプロトタイプでの概念が導入されています。

すべてのオブジェクトは、すべての機能は、この属性の「原型」の属性値が作成機能に割り当てられた属性オブジェクトのプロトタイプオブジェクトに対応し、「[[プロトタイプ]」属性（__proto__を介してアクセス）を有します「オブジェクトプロト」プロトタイプオブジェクトは、すべてのオブジェクトがオブジェクト・インスタンスを指し、プロトタイプのプロトタイプを「プロトタイプ」と「コンストラクタ」によって相互に関連付けられて作成コンストラクタに対応するすべてのプロパティ「コンストラクタ」属性を有し、これらの特性を記載しています、私たちは、プロトタイプの明確な理解を持つことができると信じています。