首页 > 代码库 > js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别

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

__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本身的原型指向。

 

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