JavaScript 在调用原型成员时返回“未定义”答案

【问题标题】：JavaScript returning 'undefined' when calling prototype memberJavaScript 在调用原型成员时返回“未定义”
【发布时间】：2018-09-06 02:07:31
【问题描述】：

所以我是 JavaScript 中的 OOP 新手，无法理解为什么我在以下代码中得到“未定义”，请帮助：

function Vehicle(energyType, energy) {
	this.energyType = energyType;
	this.energy = energy;
}

function Car(energyType, energy) {
	Vehicle.call(energyType, energy);

	this.doors = 4;
}

Car.prototype = Object.create(Vehicle.prototype);

Vehicle.prototype.run = function() {
	console.log(`This vehicle is running on ${this.energyType}.`);
}

const c = new Car('gas', 80);

c.run();

当您运行代码时，它会显示“这辆车在未定义的情况下运行”，即使我说 Car has gas energyType...？

【问题讨论】：

标签： javascript oop inheritance prototype

【解决方案1】：

当你.call时，第一个参数应该是你希望被调用函数引用的this。所以，

Vehicle.call(energyType, energy);

导致Vehicle 使用 one 参数调用，this 值最初是 energyType 变量（强制转换为对象，因为 this 必须是对象，而不是原始对象）。如果你在Vehicle 里面console.log 可以看到这个：

function Vehicle(energyType, energy) {
  console.log('this', this);
  console.log('energyType', energyType);
  console.log('energy', energy);
	this.energyType = energyType;
	this.energy = energy;
}

function Car(energyType, energy) {
	Vehicle.call(energyType, energy);

	this.doors = 4;
}

Car.prototype = Object.create(Vehicle.prototype);

Vehicle.prototype.run = function() {
	console.log(`This vehicle is running on ${this.energyType}.`);
}

const c = new Car('gas', 80);

c.run();

改为：

Vehicle.call(this, energyType, energy);

function Vehicle(energyType, energy) {
	this.energyType = energyType;
	this.energy = energy;
}

function Car(energyType, energy) {
	Vehicle.call(this, energyType, energy);

	this.doors = 4;
}

Car.prototype = Object.create(Vehicle.prototype);

Vehicle.prototype.run = function() {
	console.log(`This vehicle is running on ${this.energyType}.`);
}

const c = new Car('gas', 80);

c.run();

【讨论】：

大声笑.. 有趣的是，一个简单的错字有时会花费您 30 分钟才能弄清楚 xD。谢谢你

【解决方案2】：

缺少this。

Vehicle.call(this, energyType, energy);

【讨论】：

【解决方案3】：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

function.call(thisArg, arg1, arg2, ...)

将this 传递给Vehicle.call(this,energyType, energy);

function Vehicle(energyType, energy) {
	this.energyType = energyType;
	this.energy = energy;
}

function Car(energyType, energy) {
	Vehicle.call(this,energyType, energy);

	this.doors = 4;
}

Car.prototype = Object.create(Vehicle.prototype);

Vehicle.prototype.run = function() {
	console.log(`This vehicle is running on ${this.energyType}.`);
}

const c = new Car('gas', 80);

c.run();

【讨论】：