JavaScript プロトタイプとプロトタイプ チェーンを深く理解するには 10 分

プロトタイプとプロトタイプ チェーンは、js では難しくて重要なポイントです。プロトタイプとプロトタイプ チェーンを理解すると、その後の勉強や作業がより効率的になり、面接でもプロトタイプとプロトタイプ チェーンが重要になります。トピック。この記事を読めば、プロトタイプとプロトタイプチェーンについて深く包括的に理解できるようになりますので、皆様のお役に立てれば幸いです。

一、関数オブジェクト

すべての参照型 (関数、配列、オブジェクト) にはすべて __proto__ があります。属性（暗黙的なプロトタイプ）

。オブジェクトは、関数を定義するときに

#＃最初のレビューが作成されましたコンストラクター

//创建构造函数
        function Word(words){
            this.words = words;
        }
        Word.prototype = {
            alert(){
                alert(this.words);
            }
        }
        //创建实例
        var w = new Word("hello world");
        w.print = function(){
            console.log(this.words);
            console.log(this);  //Person对象
        }
        w.print();  //hello world
        w.alert();  //hello world

PRINT () メソッド メソッドであるため、w.print() は hello world を出力します。alert() は w インスタンス メソッドに属しませんが、コンストラクター メソッドに属します。インスタンスはコンストラクター メソッドを継承するため、hello world も出力します。

# インスタンス W のステルス プロトタイプは、その構成関数の明示的なプロトタイプを指します。これは、Heng が

#

         w.__proto__ === Word.prototype

## を呼び出すとき、Heng が次と等しいことを意味します。特定のメソッドまたは検索 特定の属性が見つかった場合、最初にそれ自体を呼び出して検索します。属性またはメソッドがない場合は、その __proto__ 属性で検索を呼び出します。つまり、検索

が呼び出されます。コンストラクターのプロトタイプ内。したがって、インスタンス継承コンストラクターのメソッドとプロパティを理解するのは簡単です。

w 自体には、alert() メソッドがないため、Word() の明示的なプロトタイプでalert() を呼び出します。インスタンス継承コンストラクターのメソッドです。

3. プロトタイプとプロトタイプ チェーン

        Function.prototype.a = "a";
        Object.prototype.b = "b";
        function Person(){}
        console.log(Person);    //function Person()
        let p = new Person();
        console.log(p);         //Person {} 对象
        console.log(p.a);       //undefined
        console.log(p.b);       //b

考えてみると、p.a の印刷結果は未定義で、p.b の結果は b

分析:

p は Person() インスタンスは Person オブジェクトで、属性値 __proto__ を持ち、__proto__ は Constructor と __proto という 2 つの属性値を含むオブジェクトです __

        console.log(p.__proto__.constructor);   //function Person(){}
        console.log(p.__proto__.__proto__);     //对象{}，拥有很多属性值

P .__ Proto を見つけます__. コンストラクタの戻り 結果はコンストラクタ自体です、p.__proto__.__proto__ には多くのパラメータがあります

## コンストラクタ属性を呼び出します、p.___proto__.__proto__.constructor を取得します複数のパラメーターの Object() 関数。Person.prototype の暗黙のプロトタイプのコンストラクターは Object() を指します。つまり、Person.prototype.__proto__.constructor == Object()

p.__proto__.constructor から返される結果はコンストラクター自体です。したがって、p.b の出力結果は b であり、p には b 属性がありません。常に __proto__ を介して上方向に検索し、最終的に Object.prototype が見つかったときにそれを見つけ、最後に b を出力します。上方向の検索プロセス中に、Object を取得します。 Function.prototype ではなくプロトタイプです。検索 a 属性が見つからないため、結果は未定義です。これがプロトタイプ チェーンです。__proto__ を上向きに検索し、最終的に null で終了します。

        console.log(p.__proto__.__proto__.__proto__);   //null
        console.log(Object.prototype.__proto__);        //null

誰もがプロセスを理解しているため、今、次のことも理解しておく必要があると思います

        //Function
        function Function(){}
        console.log(Function);  //Function()
        console.log(Function.prototype.constructor);    //Function()
        console.log(Function.prototype.__proto__);      //Object.prototype
        console.log(Function.prototype.__proto__.__proto__);    //NULL
        console.log(Function.prototype.__proto__.constructor);  //Object()
        console.log(Function.prototype.__proto__ === Object.prototype); //true

要約:

1. 属性を見つけます。それ自体がない場合は、__proto__ に移動して、コンストラクターの表示プロトタイプを見つけます。コンストラクター内にそのような属性がない場合は、コンストラクターもオブジェクトであるため、 、 __proto____________________________________________________________________________________________________________________________________________________________________________________________________________________________ がある場合、null になるまでその明示的なプロトタイプを検索します。null でない場合は、unknown

を返します。 2.p.__proto__.constructor == function Person(){}

3. p.___proto__.__proto__== Object.prototype

4.p.___proto__.__proto__.__proto__== Object.prototype.__proto__ == null Protropype ではありません

やっと写真. 読んだら絵が理解できるはずです. JavaScript学習チュートリアル

#]

以上がJavaScript プロトタイプとプロトタイプ チェーンを深く理解するには 10 分の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。