且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

javascript - 关于JS中原型重写导致的问题

更新时间:2022-12-13 13:44:30

function MyObject(){}//[1]
var obj1=new MyObject();//[2]
console.log('[2]'+(obj1 instanceof MyObject));//true
console.log(obj1.__proto__===MyObject.prototype);//true
MyObject.prototype.type='MyObject';//[3]
var obj2=new MyObject();//[4]
console.log('[4]'+(obj2 instanceof MyObject));//true
MyObject.prototype={//[5]
    type:"Bird"
}

var obj3=new MyObject();//[6]
console.log('[6]'+(obj3 instanceof MyObject));//true
console.log(obj1 instanceof MyObject);//[7] false
console.log(obj2 instanceof MyObject);//[8] false
console.log(obj3 instanceof MyObject);//[9] true

console.log(obj1 instanceof obj1.constructor);//[10] false
console.log(obj1.constructor ===MyObject);//[11] true

instanceof的操作语义为判断操作符左边的实例对象的原型链中是否存在操作符右边的构造函数的prototype属性指向的对象-也就是原型对象
JS实现引擎,会为每一个对象添加一个__proto__自有属性,指向这个对象的原型对象

执行[2]后,obj1的原型链中存在MyObject.prototype指向的对象-一个Object类型的实例对象PROTOTYPE_ORG,其constructor属性值为MyObject函数,obj1.__proto__属性指向MyObject.prototype指向的对象,也就是obj1.__proto__和PROTOTYPE_ORG相同
[3]只是为原型对象添加了一个属性,并没有改变原MyObject.prototype属性指向的对象,obj1和obj2的原型链是相同的
[5]来了个大的,把MyObject.prototype的默认指向改变了,指向了一个新的对象PROTOTYPE_NEW,这个对象带有一个type属性,并且这个对象的constructor为Object(默认构造函数)。那么此时PROTOTYPE_NEWPROTOTYPE_ORG同时存在;obj1和obj2的__proto__属性还是指向的PROTOTYPE_ORG。这个和下面代码的处理方式同理:

var a1={
    name:"a1"
};
var b1=a1;
console.log(a1.name);//a1
console.log(b1.name);//a1

b1={
    name:"b1"
};
console.log(a1.name);//a1
console.log(b1.name);//b1

[6]创建的obj3的原型指向新的原型对象
7 PROTOTYPE_NEWPROTOTYPE_ORG是2个不同的对象
[10] obj1.constructor为MyObject,MyObject的prototype现在指向PROTOTYPE_NEW,而obj1.__proto__指向PROTOTYPE_ORG
[11] obj1.constructor为MyObject