一道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有效。