Javascript 提升 - 无法理解这个

Question

正在学习Js，无法理解为什么DOM元素取不到值：

var Car = function(loc) {
  var obj = Object.create(Car.prototype);
  obj.loc = loc;
  obj.move = move;
  return obj;
};

Car.prototype = {
    move : function() {
    this.loc++;
  }
};

var emy = Car(1);
emy.move();

document.getElementById("id").innerHTML = emy.loc;

所以我创建了一个 class 构造函数及其原型对象，但是最后一行 - document.getElementById("id").innerHTML = emy.loc; 没有被执行（除非我把它放在文件的顶部）。这是为什么？

片段：

https://jsfiddle.net/awj6mf1b/

Answer 1

is not being executed (unless I put it in the top of the file)

通常这表示上面的代码中存在错误。代码在执行此行之前崩溃。

检查那个 fiddle 的控制台日志，您会看到。

哦，吊装与这里发生的事情无关。

Answer 2

你还没有定义什么是移动：

var Car = function(loc) {
  var obj = Object.create(Car.prototype);
  obj.loc = loc;
  obj.move = move;  // <<< Here
  return obj;
};

报错：

Uncaught ReferenceError: move is not defined
    at Car (VM52:51)
    at window.onload (VM52:61)

您可以通过在实例化期间将函数放入您的对象来解决此问题：

var Car = function(loc) {
  var obj = Object.create(Car.prototype);
  obj.loc = loc;
  obj.move = function() {
    this.loc++;
  }
  return obj;
};

或者通过将函数正确添加到原型中：

var Car = function(loc) {
  var obj = Object.create(Car.prototype);
  obj.loc = loc;
  // Removed move from here
  return obj;
};

// This adds move to the cars prototype
Car.prototype.move = function() {
  this.loc++;
}

Javascript 提升 - 无法理解这个

Javascript hoisting - cant understand this

javascript

hoisting

executioncontext