1. 程式人生 > 其它 >js高階_顯示原型與隱式原型

js高階_顯示原型與隱式原型

1

每個函式function都有一個prototype,即顯示原型(屬性)

2

每個例項物件都有一個 proto_,可稱為隱式原型(屬性)

3

物件(例項)的隱式原型的值為其對應建構函式的顯示原型的值,即他們都指向同一個物件

4

記憶體結構(如圖)

//定義建構函式
            function Fun(){//內部語句:this.prototype={};
                //向建構函式中新增一個方法,這裡沒用處
                 this.asb=function(){
                console.log('word');
                }
            }
            //1. 每個函式function都有一個prototype,即顯式原型(屬性)
            console.log(Fun.prototype);
            //2. 每個例項物件都有一個__proto__,可稱為隱式原型(屬性)
            //例項化建構函式的物件
            var fun=new Fun();//內部語句:this.__proto__=Fun.prototype;這裡this代表fun這個例項
            console.log(fun.__proto__);
            //3. 物件的隱式原型的值為其對應建構函式的顯式原型的值
            console.log(fun.__proto__===Fun.prototype);
            //給原型新增方法
            Fun.prototype.test=function(){
                console.log('hellof');
            }
            //通過建構函式的例項物件呼叫
            fun.test();

5

總結:
*①函式的prototype屬性:在定義函式時自動新增的,預設值是一個空Object物件。
*②物件(例項)的 _proto__屬性:建立物件時自動新增的,預設值為建構函式的prototype屬性值。
*③程式設計師能直接操作顯示原型,但不能直接操作隱式原型(ES6之前)

為啥在建構函式原型裡新增方法所有例項都能使用的原理

往建構函式的原型物件裡新增方法時,為什麼該建構函式的所有例項都能使用?就是因為它要調原型中的方法是,先在自己這個物件(例項本身)裡找,(因為例項化一個物件就會在堆空間裡開闢一個物件的空間,和在物件裡的屬性是一個函式一個道理,物件裡的屬性是一個函式時,會在堆中又開闢一個空間,在堆中該屬性存的就是該空間的引用),找不到就同過該例項的隱式屬性 _proto__去建構函式的原型物件裡找。