JavaScriptprototype定义的属性在实例中的表现

Posted 2022-12-05 remo0x

众所周知，用构造函数的prototype定义的属性将被所有实例共享，有节省空间和加快初始化速度的优点。

可是在初学之时，prototype具体的表现不容易理解，特别是跟Java的static变量类比时，有一个区别特别容易混淆：不能直接通过修改实例的属性影响prototype定义的属性。

举个栗子，在Java中，可以通过实例修改static变量的值，修改后的值将影响该类的所有实例。而在javascript，具体的表现却不是这样：

// 定义一个类A
function A() 


// 通过prototype添加一个属性a
A.prototype.a = 1;

// 实例化
// 此时对象o为
o = new A();

// 打印继承得到的a的值
// 输出：1
o.a;

// 通过prototype修改a的值
A.prototype.a = 2;

// 打印此时a的值
// 输出：2
o.a;

// 通过对象o修改a的值
o.a = 3;

// 打印对象o
// 输出：a:3
o;

// 打印A中a的值
// 输出：2
A.prototype.a;

可以看到，通过对象o修改a的值时，实际上是在对象o中添加了一个属性a，该属性覆盖了A中的a。同理，对于方法来说也是覆盖。

要想像Java中的static变量一样，可以通过实例修改其值，可以通过访问实例的__proto__属性实现：

// 通过__proto__修改原型中的属性
o.__proto__.a = 3;

// 打印A中a的值
// 输出：3
A.prototype.a;

__proto__是每个对象都有的一个属性，而prototype是函数才会有的属性，它可称为隐式原型，指向构造该对象的构造函数的原型，它可以让实例能够访问在构造函数原型中定义的属性和方法。比如在console中打印A的prototype和对象o的__proto__作对比：

// 打印A的prototype
// 输出：a: 5, constructor: ƒ
A.prototype;

// 打印o的__proto__
// 输出：a: 5, constructor: ƒ
a.__proto__;

即实例的__proto__就是构造函数的prototype。