一道JavaScript面试题 理解原型对象
作者:陆金龙
发表时间:2017-09-24 22:12
引用的原文链接 http://www.cnblogs.com/ghostwu/p/7272132.html
题目:以下输出的结果为?
function Parent() {
this.a = 1;
this.b = [1, 2, this.a];
this.c = { demo: 5 };
this.show = function () {
console.log(this.a , this.b , this.c.demo );
}
}
function Child() {
this.a = 2;
this.change = function () {
this.b.push(this.a);
this.a = this.b.length;
this.c.demo = this.a ;
}
}
Child.prototype = new Parent();
var parent = new Parent();
var child1 = new Child();
var child2 = new Child();
child1.a = 11;
child2.a = 12;
parent.show();
child1.show();
child2.show();
child1.change();
child2.change();
parent.show();
child1.show();
child2.show();
考察以下知识点:
1,this的指向
2,原型(prototype)以及原型链
3,继承
4,引用
理解以下几点:
1,每一个构造函数,都有一个原型[[prototype]]属性 指向构造函数的原型对象
2,每一个实例生成的时候,都会在内存中产生一块新的堆内存
3,每一实例都有一个隐式原型__proto__ 指向构造函数的原型对象
4,this的指向 取决于this调用时的位置, 在这道题中, 也可以简单理解为, 谁调用方法, this就指向哪个对象
5,数组和字面量对象 都是 引用
6,原型链的查找规则: 就近原则
运行结果:1,[1,2,1],5 //这个无特别之处
11,[1,2,1],5 //a重新赋值,b是在 Child.prototype = new Parent()时初始化(当时a的值为1,之后a发生变化 不能影响到b) 12,[1,2,1],5 //a重新赋值了 b同上 不受子类a重新赋值的影响 1,[1,2,1],5 //parent没有变化 注意不受child1和child2操作的影响 5,[1,2,1,11,12],5 //child1.change() 后为5,[1,2,1,11],4 child2.change()后 5,[1,2,1,11,12],5 6,[1,2,1,11,12],5 //child1.change() 后为12,[1,2,1,11],4 child2.change()后 6,[1,2,1,11,12],5
child1.change() 后 Child.prototype.b=[1,2,1,11] child1. a= 4 Child.prototype.c.demo=4 a 后 child1. a=5
child2.change() 后Child.prototype.b=[1,2,1,11,12] child2.a= 5 Child.prototype.c.demo=5 child2.a 后child2.a=6
关键是Child.prototype.b和Child.prototype.c.demo的最终结果是child1和child2共有的。所以child1对b的修改对child2有效,而child2对b的修改要在刚才的变化基础之上进行,同时新的结果又对child1有效。