JSAdvanced-プロトタイプおよびプロトタイプチェーン

1.プロトタイプ

1.プロトタイプとは何ですか?

プロトタイプはJSの継承の基礎であり、JSの継承はプロトタイプに基づく継承です。

2.いくつかの基本的な定義

(1)各関数にはプロトタイプ属性があり、デフォルトでは空のオブジェクトオブジェクト(プロトタイプオブジェクトと呼ばれます)を指します。
(2)プロトタイプオブジェクトには、関数オブジェクトを指すコンストラクター属性があります。

コード表示:
ここに画像の説明を挿入
ここに画像の説明を挿入

(3)グラフィック:
注:関数名はType、prototypeはその属性、Type.prototypeはTypeのプロトタイプオブジェクトを指し、prototypeオブジェクトにはコンストラクター属性があり、コンストラクターはTypeを指します。コンストラクターと関数オブジェクトの関係は相互参照です。

2つの明示的なプロトタイプと暗黙的なプロトタイプ

1.各関数関数には、明示的なプロトタイプ属性であるプロトタイプがあります
2.各インスタンスオブジェクトには暗黙のプロトタイププロパティがあります
3.オブジェクトの暗黙的なプロトタイプの値は、対応するコンストラクターの明示的なプロトタイプの値です。
  //1、每个函数function都有一个prototype,称为显式原型属性 默认指向一个空的object对象
        console.log(Fn.prototype); //函数对象定义时添加此属性

        //2、每个实例对象都有一个_proto_可称为隐式原型(属性)
        //创建实例对象
        const fn = new Fn();  // this.__proto__ = Fn.prototype
        console.log(fn.__proto__);  //创建对象添加此属性


        //3、对象的隐式原型的值为其对应构造函数的显式原型的值
        console.log(Fn.prototype === fn.__proto__);

        //4、给原型添加方法
        Fn.prototype.test = function(){
    
    
            console.log("test()");
        };
        //通过实例对象调用原型的方法
        fn.test();

コードプロトタイプアイコン:

    function Fn(){
    
    

    }
    var fn = new Fn();

    Fn.prototype.test = function(){
    
    
        console.log("test()");
    };
    fn.text();

ここに画像の説明を挿入
概要:
関数のプロトタイププロパティ:

  1. 関数の定義時に自動的に追加され、デフォルト値は空のObjectオブジェクトです。
  2. オブジェクトの_Proto_プロパティ:オブジェクトの作成時に自動的に追加されます。デフォルト値は、コンストラクターのプロトタイププロパティ値です。
  3. 明示的なプロトタイプは直接操作できますが、暗黙的なプロトタイプは直接操作できません。

第三に、プロトタイプチェーン

オブジェクトプロパティにアクセスするときに、それ自体のプロパティで検索され、見つかったときに返されるようになりました。
_proto_チェーンを再度検索しない場合は、見つけて戻ります。
最後に見つからない場合は、undefinedを返します
エイリアス:暗黙のプロトタイプチェーン
コード:
        function Fn(){
    
    
            this.test1 = function(){
    
    
                console.log("test1()");
            };
            console.log(this);
        }

        Fn.prototype.test2 = function(){
    
    
            console.log('test2()');
        };

//创建一个实例对象
        var fn = new Fn();
        console.log(fn);

        console.log(fn.__proto__);

プロトタイプチェーンアイコン:
ここに画像の説明を挿入
注:プロトタイプチェーンの最後では、Objectの暗黙的なプロトタイププロパティはnullであり、プロトタイプチェーンは暗黙的なプロトタイプチェーンです。
プロトタイプチェーンの役割:オブジェクトのプロパティを見つけること。
スコープチェーン:変数を検索します。

4、要約:

1.すべての関数には、暗黙的なプロトタイプと明示的なプロトタイプの2つのプロパティがあります。すべての関数は大文字のFunctionのインスタンスオブジェクトであるためです。次の2行のコードは同等です
function foo(){
    
    
}
var foo = new Function();
2.インスタンスオブジェクトの暗黙的なプロトタイプは、そのコンストラクターの明示的なプロトタイプと同じです。
3.大文字の関数の明示的なプロトタイプと等しいため、すべての関数の暗黙的なプロトタイプオブジェクトは等しい
4.すべての関数の明示的なプロトタイプは、オブジェクトを除く空のオブジェクトオブジェクトを指します
5.Objectは大文字のFunctionのインスタンスでもあります

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_43690348/article/details/108927063