一道有意思的JavaScript 题目

今天在网上看到一道题，觉得很有意思就把它抄下来解了。题目是这样的：

           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 );
                   /* alert(this.b);*/
                }
            }
            function Child() {
                this.a = 2;
                this.change = function () {
                    this.b.push(this.a);
                    this.a = this.b.length;
                    this.c.demo = this.a++;
                     /* alert(this.b.length);*/
                    /*alert(this.b);*/
                }
            }
            Child.prototype = new Parent();// 继承
            var parent = new Parent();
            var child1 = new Child();
            var child2 = new Child();
            child1.a = 11;
            child2.a = 12;

            parent.show();//1 [ 1, 2, 1 ] 5 
            child1.show();//11 [ 1, 2, 1 ] 5
            child2.show();//12 [ 1, 2, 1 ] 5

            child1.change();
            child2.change();

            parent.show();//1 [ 1, 2, 1 ] 5
            child1.show();//5 [ 1, 2, 1, 11, 12 ] 5
            child2.show();//6 [ 1, 2, 1, 11, 12 ] 5

下面让我们来跟着运行结果分析代码：

第一： parent.show();//1 [ 1, 2, 1 ] 5 ：调用自己的方法，自己的属性，这个就比较简单了。 就不多说。

第二： child1.show();//11 [ 1, 2, 1 ] 5 ：我们知道，Child 继承了parent ,而child1 是Child 的实例，所以此时看图：

因为 child1.a=11;所以child1.show 的时候 使用的是自己的 a这个值，与此同时，child1中没有b,所以根据原型链搜查值原理，这个会顺着原型链往上找，直到找到 Parent 中，而此时使用的就是Parent 的值，而因为this 是看谁在使用它，就指向谁，而此时使用的是此时是 Parent中的b ,故可以理解成 Parent.b=[1,2,Parent.a];  而 this.c = { demo: 5 }，因为child 1也没有 c ,所以会找到 Parent 中的c ,故此时就是 11 [1,2,1] 5

child2 情况如同child 1.

 

child1.change();

child2.change(); //经历了这两个函数， this.b.push(this.a); this.b这个数组中压入值，第一次压入11，第二次压入12.    this.a = this.b.length; 将数组的长度赋值给a,第一次压入后长度是4 ，第二次是5 故this.c.demo = this.a++; 中 this.c=5，这里考察了a++赋值，先赋值后++ 。
此时数组变成[1,2,1,11,12]

这里提一下：
child1.change()时 this.c=4,而this.a++在赋值之后自增变成5.
child2.change()时 this.c=5;而this.a++自增变成6. 
（我特地写这这两段是因为我在考虑自增的时候很郁闷，因为当child2.chang()已经执行完后，this.a++自增变成6 ，那么child1.show 和child2.show 为什么输出不同的this.a呢？ 这个问题就考虑到了深复制的问题，child1与child2对child是深复制，他们之间的私有变量不会互相影响,而他们对parent是浅赋值，所以会共享this.c.demo
的值。
）

 *值得注意的是，当执行child1.chang() 和child2.chang()之后，他们两个都给自己添加了变量c.demo ,但是实际上并不会影响到parent 自身的c.demo的值，parent.show中调用的依旧是自己的c.demo，您可以修改parent中 demo的值就可以明显看出来了。