javascript - 为什么实例对象调用方法的值不会随原型的改变而改变

Question

看书看到的例子：

var Car = function (wheelCount) {
    this.wheels = wheelCount || 4;
}

Car.prototype.odometer = 0;

Car.prototype.drive = function (miles) {
    this.odometer += miles;
    return this.odometer;
}

var tesla = new Car();

Car.prototype.odometer = 200;

tesla.drive(10) //210

Car.prototype.odometer = 2000;

tesla.drive(10) //220

第二次调用tesla.drive(10)时是220而不是2010，我的理解是因为实例化对象在调用函数以后其内部创建了自己的odometer变量环境就与原型无关了，书上没有说明原因不知道我理解的对不对，还望指教。谢谢。

Answer 1

你的代码

var tesla = new Car();

Car.prototype.odometer = 200;

tesla.drive(10) //210 （经过这次drive，在tesla上创建了odometer属性）

Car.prototype.odometer = 2000;（这个只改了原型）

tesla.drive(10) //220（这个操作的是属性）

这样改一下,因为在原型里面用this.xxx =yyy 赋值，如果不存在会创建对象的属性，下一次再操作原型，显示的就是属性的值，而不是原型上的值。

这是你要的效果

var Car = function (wheelCount) {
  this.wheels = wheelCount || 4;
}

Car.prototype.odometer = 0;

Car.prototype.drive = function (miles) {
  **this.__proto__.odometer** += miles;
  console.log(this.odometer);
};

var tesla = new Car();

Car.prototype.odometer = 200;

tesla.drive(10) //210   

Car.prototype.odometer = 2000;

tesla.drive(10) //2010

Answer 2

你这里的this.odometer是+=，分解之后其实是this.odometer=this.odometer+xx。
也就是this.odometer=this.__proto__.odometer+xx。
所以是取原型的值来设置对象的属性值。

Answer 3

操作的是对象的odometer属性不是原型上的odometer吧

Answer 4

进过2次实验 和 scort的回答。我是这么理解的：
testla没有drive方法，drive是testla原形的方法，所以this指代的是Car
1.首先Car对象是没有odometer属性的;odometer是Car原形的属性,所以第一次调用drive的时候,由于car还没有odometer属性，会读取car原形的odometer,同时会给car生成一个odometer的属性，
2.之后再调用drive由于已经有了odometer属性所以不会再读取car原形的odometer属性了；

如图你可以发现2次car对象的属性发生了变化，这也是为什么我2次实验结果会有差异的原因

Answer 5

this.odometer += miles;赋值的时候由于本身没有odometer会自身创建一个属性，所以下一次调用的时候就调用自身的odometer是210

Answer 6

drive方法中，this.odometer += miles;语句中的this是实例化对象，即tesla。
你return的也是tesla的odometer属性。