Question

在处理我的小项目时，我遇到了一个非常奇怪的错误，并且对其进行了更奇怪的修复。

下面，我重现了遇到的错误。它能做什么？当您按下按钮“ 5平方？”它应该显示25。

如您所见，我的代码中onlyfive()["Why it works???"];在哪里。这是我的解决办法。 ;）

如果您删除了["Why it works???"]部分，有时它会在输入中显示为undefined。

但是使用["Why it works???"]时，我在控制台中收到一条错误消息“未捕获的TypeError：无法读取属性“为什么起作用？？？”的不确定”

基本上，您可以在此处编写任何内容，但仍然可以使用。

ps。是的，我是JS的新手：（

编辑：好的，伙计们。谢谢您的回答。通过添加解决了问题

static fivesqure(e) {
  if (e.square !== undefined) {
    testInput.value = `${e.square}`;
  }
}

愚蠢的错误。

"use strict";
const testInput = document.querySelector(".testInput");
const testFive = document.querySelector(".testFive");
const testRandom = document.querySelector(".testRandom");
const testClear = document.querySelector(".testClear");

const settings = () => {
  let randomNumber = Math.random() * 9 + 1 >> 0;

  if (randomNumber === 5) {
    return {randomNumber};
  } else {
    onlyfive()["Why it works???"];
  }
};

const testClass = class testClass {
  constructor(e) {
    if(e !== undefined && e.randomNumber === 5) {
      this.square = e.randomNumber * e.randomNumber;
    }
  }

  static fivesqure(e) {
    testInput.value = `${e.square}`;
  }
}
const onlyfive = () => testClass.fivesqure(new testClass(settings()));

testFive.addEventListener("click", onlyfive);
testRandom.addEventListener("click", () => testInput.value = Math.random() * 9 + 1 >> 0);
testClear.addEventListener("click", () => testInput.value = "");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<input class="testInput">
<button class="testFive">5 squared?</button>
<button class="testRandom">from 1 to 9</button>
<button class="testClear">clear input</button>

<script src="app.js"></script>
</body>
</html>

Answer 1

您的结构只是一团糟。

当您调用onlyFive并且不返回随机数5时，您实际上并没有在else子句中返回仅触发五的任何内容：

if (randomNumber === 5) { return {randomNumber}; } else { // missing return here. onlyfive()["Why it works???"]; }

因此，这些对象中的任何一个都将根本没有this.square属性。但是由于您使用的是对foursqure的静态调用的值，而不是要尝试创建的实例的this.square属性，因此在抛出错误时将在视觉效果中设置undefined：

static fivesqure(e) { testInput.value = $ {e.square} ; }

我的建议是：

1）为this.square属性使用placehodler值，因此总会有一个值。

2）不要使用静态方法来初始化类的实例。

3）仅使用实例值填充视觉效果。

Answer 2

您在那里有一个无限的递归调用：

onlyfive → settings → onlyfive → settings ...

仅当您随机找到值5时，此循环才会终止。该值将传递到new testclass，然后将其传递到fivesqure，后者会将值分配给输入。

现在，如果您进入else { onlyfive() }分支，那么它也将向new testclass返回一个值，该值将分配给输入，但是该分支中的值为undefined，因为return分支中没有else。

但是，如果在其中添加任何[...]，将导致错误并停止链返回。否则，所有递归调用将解散，并且该链的第一个调用将使用undefined覆盖输入上的值。

JS类，奇怪的行为

2 个答案: