【问题标题】:Javascript hoisting - cant understand thisJavascript提升 - 无法理解这一点
【发布时间】:2017-05-25 08:40:56
【问题描述】:

想学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;

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

片段:

https://jsfiddle.net/awj6mf1b/

【问题讨论】:

  • 是的,我刚刚将它的 id 命名为“id” :) 很抱歉造成混淆
  • 您能否创建一个 codepen/sn-p,通过编辑您的问题并按下 sn-p 按钮来复制您的问题
  • 已添加。如您所见,第一个 div 未定义,但第二个 div 根本没有价值..
  • 谢谢@Sergio Tulentsev - 我会记住这一点

标签: javascript hoisting executioncontext


【解决方案1】:

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

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++;
}

【讨论】:

  • 啊,是的,好的。我也可以保留我的模式Car.prototype = { move : function() { this.loc++; } }; 只需要从构造函数中删除obj.move = move...
  • @rordevnewb 是的,对不起,我稍微改变了将函数添加到构造函数的语法,但没有理由不使用你的,问题是构造函数中对 move 的引用。
  • 是的,我明白了 - 我只是在学习,当 Netscape 统治世界时使用了这种模式 :) 感谢您的解释!
【解决方案2】:

没有被执行(除非我把它放在文件的顶部)

通常表示上述代码中存在错误。代码在执行此行之前就崩溃了。

检查那个小提琴的控制台日志,你会看到。

哦,提升与这里发生的事情无关。

【讨论】:

  • 谢谢,我明白了
猜你喜欢
  • 2011-10-09
  • 1970-01-01
  • 2020-10-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-04
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多