关于Js继承的一个小问题

Question

昨天遇到的一个问题：
对于两个普通的对象a,b

var a = {
     foo:1,
     methodA:function(){
        console.log(this.foo);
     }
}

var b = {
     bar:2,
     methodB: function(){
        console.log(this.bar);
    }
}

可以不考虑执行环境的兼容性，实现下面要求：
1 执行a.methodA()输出1;
2.执行a.methodB()输出2；
3.执行b.bar=3;a.methodB()输出3

上面的就是题目，首先想到的就是继承，a继承b,可以直接调用b的methodB方法。在题目的基础上，我会这么实现的:

function A(){
    this.foo = foo;
    this.methodA = function(){
        console.log(this.foo);
    }
    B.call(this)  //实现继承
 }

function B(){
    this.bar = bar;
    this.methodB = function(){
       console.log(this.bar);
    }
}
 var a = new A();
 var b = new B();

执行下面的代码：
a.methodA() //输出1;
a.methodB() //输出2；
b.bar=3;a.methodB() //仍输出2

很显然不符合要求。
求大神告知产生的原因和解决的方法。 难道是我一开始就理解的不正确吗？

Answer 1

var a = {

 foo:1,
 methodA:function(){
    console.log(this.foo);
 }
};

var b = {

 bar:2,
 methodB: function(){
    console.log(this.bar);
}
};
a.__proto__ = b;

a.methodB(); //2
b.bar = 3;
a.methodB();//3

Answer 2

我接触JS不太久，仅仅提出我的一些看法。

var a = new A();
var b = new B();

执行第一句的时候确实会继承B类，但是执行第二句new B()的时候是重新申请了另外一个空间存入这个b变量的，和之前创建的a是没有任何关系的，因此如果你修改b.bar=3当然也就不会改变a.methondB()的输出结果。简单理解来说，就是a中有一个B类的实例，可以实现B类的功能但是并不代表和b是同一个实例。

Answer 3

这个应该是内存的事吧 楼主最后还是2的原因是methodB是函数 a，b两个函数公用一个内存，bar是基础类型 所以改变了b.bar=3 A函数里面的bar不会变
二楼这个是把整个b浅复制给a.prototype两者直接就用一块地方 所以会跟着变
大概是这样吧

Answer 4

var a = {
    foo: 1,
    methodA: function () {
        console.log(this.foo);
    }
};

var b = {
    bar: 2,
    methodB: function () {
        console.log(this.bar);
    }
};


a.methodB = function () {
    return b.methodB();
};

a.methodA();//1

a.methodB();//2

b.bar = 3;
a.methodB();//3

Answer 5

这个题目用继承来实现最好了，我很赞同二楼的做法，用 __proto__来实现继承。
每个对象都有一个 __proto__，用来实现继承（关于继承，网上的文章很多，建议你找一些来看看）。代码

var a = {
 foo:1,
 methodA:function(){
    console.log(this.foo);
 }
};
var b = {
 bar:2,
 methodB: function(){
    console.log(this.bar);
}
};
a.__proto__ = b;

代码直接拷贝二楼的，a.__proto__ = b；就是实现 a 继承 b，当访问 a.methodB 的时候，由于 a 没有这个方法，就从 a 的 __proto__ （指向 b ）中来找，b 中有这个方法，于是就返回了。

现在来解答楼主的疑问（明明对象可以实现，楼主非要用函数），

先来解释一下函数的继承，函数的继承也是通过__proto__来实现，利用函数的 prototype 属性，比如要实现 A 函数继承 B 函数，只要

A.__proto__ = new B()；

那么在来解释一下 new，实现new 的时候，实际上执行了三个操作，以var a = new A()为例子：

var a = {};
a.__proto__ = A.prototype;
A.call(a); //楼主实际上只执行了这句话

看一下楼主的代码

function A(){
    this.foo = 'foo';
    this.methodA = function(){
        console.log(this.foo);
    }
    B.call(this)  //实现继承
}

楼主使用的是 B.call(this)的方法想来实现继承，通过 chrome 调试，可以看到

这个时候 a 多出来 foo 和 methodB 函数，通过 a.methodB() 调用的是自己的，这和 b 一点关系都没有，根本没有实现继承，所有单单通过 call 是不能实现继承的。

那么，即使按照楼主的方法，我稍微修改了一下，实现 函数 A 继承函数 B，看看可不可以实现：

function A(){
  this.foo = 1;
  this.methodA = function(){
      console.log(this.foo);
  }
}
function B(){
  this.bar = 2;
  this.methodB = function(){
     console.log(this.bar);
  }
}
A.prototype = new B(); //A 继承 B
var a = new A();
var b = new B();
a.methodA() //输出1;
a.methodB() //输出2；
b.bar=3;
a.methodB() //仍输出2

很遗憾，输出仍然是 2，因为 var b = new B()；导致 b.bar = 3，并没有改变函数 B 的 bar 属性，所有如果要得到正确的答案，还是要回到最开始

var a = new A();
var b = new B();
a.__proto__ = b; //小 a 继承 小 b
a.methodA() //输出1;
a.methodB() //输出2；
b.bar=3;
a.methodB() //输出3

这里加了 a.__proto__ = b;和开始的方法一样。

希望可以帮到楼主。。