javascript - 我的 javascript 对象出了什么问题？

Question

我刚刚开始学习 JavaScript 中的 OOP，我正在尝试使用我之前作为过程程序编写的 OOP 重新编写一个简单的程序。该程序是一个 react 测试器，屏幕上会出现一个随机形状，用户必须尽快单击它。单击形状后，将显示用户响应所需的时间(以秒为单位)。

我还没有走得太远，我只是想在屏幕上显示一个随机大小和随机颜色的正方形，但我什至无法做到这一点。请参阅下面的代码:

<script type="text/javascript">

function Shape () {
  this.x = Math.floor(Math.random()*850);
  this.y = Math.floor(Math.random()*850);
  this.draw();
}

Shape.prototype.draw = function() {
  var shapeHtml = '<div></div>';
  var widthAndHeight = Math.floor(Math.random()*400);
  var left = Math.floor(Math.random()*850);
  var top = Math.floor(Math.random()*850);
  this.shapeElement = $(shapeHtml);
  this.shapeElement.css({
    position: "relative",
    left: this.left,
    top: this.top,
    width: widthAndHeight,
    height: widthAndHeight,
  });
  $("body").append(this.shapeElement);
}

Shape.prototype.colour = function() {
  var colours = '0123456789ABCDEF'.split('');
  var randomColour = "#";
  for (i = 0; i < 6; i++) {
    randomColour+=colours[Math.floor(Math.random()*16)];
  };
  this.shapeElement.css({backgroundColor: 'randomColour'});
}

var square = new Shape();


</script

到目前为止，屏幕上不会出现任何方 block 。所发生的只是附加一个随机大小的 div，但它始终位于左上角位置并且没有背景颜色。控制台没有帮助我，因为它没有显示我的代码中有任何错误。我非常困惑，并且发现向 OOP 的过渡非常令人困惑。任何帮助理解为什么这不起作用的帮助将不胜感激!

Answer 1

几个小错误:

警告: function Shape设置x和y未使用的属性。

错误: Shape.prototype.draw定义变量left和top但将它们称为 this.left和this.top在 CSS 对象初始值设定项中。作为属性，它们是未定义的 - 取出两个 this.预选赛。

错误: Shape.prototype.colour没有被调用，因此 DIV 元素是透明的。插入通话this.colour()例如，设置 CSS 之后。

错误:背景颜色的 css 初始化程序对象值应该是变量名称 randomColour不是字符串文字 'randomColour' 。删除标识符周围的引号。

严重警告: colour 中的 for 循环函数未声明i并将其创建为隐式全局变量。插入"use strict";在脚本文件或函数体的开头，为未声明的变量生成错误。

总而言之，这些错误都不会在控制台上生成错误(未定义的 CSS 值将被忽略)，但会阻止代码运行。