js中__proto__, property, prototype, 對象自身屬性方法和原型中的屬性方法的區別

標籤：div   on()   base   調用   console   object   struct   name   bsp   

__proto__: 這個屬性是執行個體對象的屬性，每個執行個體對象都有一個__proto__屬性，這個屬性指向執行個體化該執行個體的建構函式的原型對象（prototype）。

proterty：這個方法是對象的屬性。（據說和一個對象的attr類似，比如dom對象中）

prototype：每個建構函式都有一個prototype對象，這個對象指向該建構函式的原型。

對象自身屬性方法和原型中的屬性方法的區別: 對象自身的屬性和方法只對該對象有效，而原型鏈中的屬性方法對所有執行個體有效。

例子：

         function baseClass(){
             this.age = 12;//構造方法裡面的age屬性
             this.showMsg = function(){//構造方法裡面的showMsg方法
               console.log("baseClass::showMsg");
            }
         }
         baseClass.prototype.say = function () {//原型上定義的say方法
            console.log(‘test‘);
         }
         baseClass.prototype.age = 23;//原型上定義的name屬性

         function extendClass(){};//extendClass新的構造方法
         var b = new baseClass();//執行個體化一個baseClass
         console.log(b,121212);//此時b對象包含了baseClass建構函式中的屬性和方法，不包含baseClass原型上的屬性和方法，原型中的屬性和方法為所有執行個體所共用，
　　　　　　　　　　　　　　　　　　//不會單獨到執行個體化的對象身上，當在執行個體化對象中調用原型中的屬性和方法時，可以通過原型鏈得到原型中的屬性和方法（對象自身沒有同名
　　　　　　　　　　　　　　　　　　//屬性和方法的前提下，否則是執行個體自身的屬性和方法

         extendClass.prototype = b;//把extendClass的原型指向執行個體化的b，即extendClass的原型中就具備了b對象所有的屬性和方法

         var instance = new extendClass();//執行個體化一個extendClass執行個體instance
　　　　　//此時instance應該是一個Null 物件，但是後面賦值了，這裡也有值（不知道為啥，按道理js是順序執行的），instance.__proto__屬性指向的是extendClass的原型對象,而
　　　　　//extendClass.prototype等於baseClass建構函式的執行個體，所以最後instance.__proto__屬性指向了baseClass建構函式,instance.__proto__.__proto__指向了
　　　　　//最初的原型對象
         instance.showMsg(); // 顯示baseClass::showMsg
         instance.name = ‘branchName‘;//instance執行個體的name屬性
         instance.age = 34;//instance執行個體的age屬性

         var instance2 = new extendClass();//執行個體化另一個extendClass對象instance2
         instance.say();//say方法是最初原型對象的方法
         baseClass.prototype.name = ‘xiugai‘;//修改最初原型對象的name屬性，修改該屬性會影響所有執行個體化隊形（執行個體化對象自身沒有該屬性的情況下）
         console.log(instance.name,instance.age);//name取的是instanace對象自身的name值‘branchName’，age同理
         console.log(instance2.name,instance2.age);//instance取的是構造方法baseClass的原型對象上面的name值‘xiugai’，age取的同樣是baseClass原型對象上的
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//age，值為‘12’
         baseClass.prototype.name = ‘zaicixiugai‘; 
         console.log(instance2.name);//此時name變成了‘zaicixiugai’
         var instance3 = new extendClass();
         console.log(instance3);//instance3是一個Null 物件，它的原型鏈最終指向了baseClass的原型對象

給建構函式的prototype賦值的時候不能直接用

object.prototype = {}賦值，

如果這樣賦值要加一行constructor屬性，否則會覆蓋掉object本身的原型指向。

 

js中__proto__, property, prototype, 對象自身屬性方法和原型中的屬性方法的區別