js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别

Posted 2020-09-26 天空玉娇

__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应该是一个空对象，但是后面赋值了，这里也有值（不知道为啥，按道理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是一个空对象，它的原型链最终指向了baseClass的原型对象

给构造函数的prototype赋值的时候不能直接用

object.prototype = {}赋值，

如果这样赋值要加一行constructor属性，否则会覆盖掉object本身的原型指向。