JSプロトタイプとプロトタイプチェーン(一)について話します.

2450 ワード

最近JavaScriptのプロトタイプとプロトタイプのチェーンを勉強していますが、この知識によって頭の中が痛くなりました.プロトタイプとググ.プロト.紛らわしい.ネット上の各種の図解、すべてかいたのはとても複雑で、いつも回り道をして、分かりません.それとも自分で叩いて、原型と原型のチェーンを理解しますか?
1、原型
(1)まず、原型は何ですか?
1>.定義:JavaScriptでは、オブジェクトを定義するたびに、オブジェクトに予め定義された属性が含まれます.各関数オブジェクトにはプロトタイプの属性があり、この属性は関数のプロトタイプのオブジェクトを指します.どのオブジェクトも、他のオブジェクトの原型として機能することができます.原型の対象も対象ですので、自分の原型もあります.
2>.コード:

     function f() {};
     console.log(typeof f.prototype)

3>.印刷結果:
(2)例:
1>.コード:

    function Person(name) {
        this.name = name;
    }
    Person.prototype.sex = 'male'
    var Jack = new Person('Jack');
    var Rose = new Person('Rose');
    console.log(Jack.sex);
    console.log(Jack.name);
    console.log(Rose.sex);
    console.log(Rose.name)

2>.印刷結果:
3>.以上のコード、構造関数Personのプロトタイプ属性は、インスタンスオブジェクトジャックとRoseのプロトタイプオブジェクトです.元のオブジェクトにsex属性を追加すると、そのインスタンスオブジェクトが属性を共有していることが分かります.
4>.上記のようなコンストラクションPersonに基づいて、どのような属性が作成されているかを確認してください.
5>.印刷結果:
6>.印刷結果から、関数オブジェクトProsonにプロトタイプの属性があり、この属性は関数のプロトタイプのオブジェクトを指します.f()_図の最後から8行目です.実例ジャックはPerson newを通じて出てくる対象であるため、PersonはPersonの原型の対象となり、同様に自分の原型の対象となる.回りくどいですが、定義1>.上記の例と合わせて、原型が何なのか分かります.注意したいのは、どの対象にも_uがあります.プロト.属性は、関数オブジェクトのみプロトタイプの属性があります.
7>.簡単に言えば、原型の対象はエヴァロボットの設計図と零号機のようです.初号機、二号機、三号機などは、この設計図と零号機をベースにして作られたものです.それぞれの特徴がありますが、基本的な構造と属性は全部設計図と零号機で見つけられます.設計図と零号機はその原型の対象です.
2、プロトタイプチェーン
(1)では、何が原型チェーンですか?
1>.定義:簡単に言えば、複数の原型からなる鎖、対象の__uプロト.プロトタイプで、プロトタイプも対象です.プロト.属性、原型の__u uプロト.また原型の原型です.このままずっと_u u u u u u u u u u uを通すことができます.プロト.探したいのですが、これがプロトタイプチェーンです.上にObjectのプロトタイプを見つけたら、このプロトタイプチェーンは終わります.
2>.上記の例に続いて、印刷結果は以下の通りである.
3>.印刷結果によってジャッキ.ウプロト.プロト.このように何重もの層を上に調べて、まず実例そのものの中で探して、もし見つけられなかったらその原型の中で探して、まだ見つけられなかったら上に行って探して、終点nullに辿り着きます.このようにチェーンのような関係が原型チェーンです.すべてのオブジェクトのプロトタイプは最終的にObject.prototypeに遡ることができます.すなわちObjectコンストラクタのプロトタイプ属性です.つまり、すべての対象はObject.prototypeの属性を継承しています.これはすべての対象がvalueOfとtostring方法を持っている理由であり、Object.prototypeから継承されているからです.では、Object.prototypeの対象はその原型がありますか?答えはObject.prototypeの原型はnullです.nullには属性や方法がなく、自分の原型もありません.だからプロトタイプチェーンの先はnullです.下図のように:
実は、定義に従って実際にデモを書いて、プリントして見れば簡単に原型と原型チェーンの概念が分かりますが、知識は海のように広いです.本文は浅いだけで、原型と原型チェーンの基本的な知識を理解して、もっと深いのは次回、JS原型と原型チェーン(二)を期待してください.
3、参考資料
(1)MDN:原型チェーンの継承と
(2)阮一峰:対象の継承
(3)JavaScript高級プログラム設計(第三版)

設定Log 4 j詳細版