时间戳

首页 > 解决方案 > JavaScript 进度条不适用于 OO JS 代码，但适用于箭头功能？

javascript - JavaScript 进度条不适用于 OO JS 代码，但适用于箭头功能？

问题描述

这是我自己发布的这个问题之后的一个问题： JavaScript progress bar does not work with oo js code

除了上面帖子中的解决方案，我尝试使用箭头函数重写 OO 脚本，代码为：

document.getElementById("barButton").addEventListener("click", callMove);

function callMove() {
  var bar1 = new ProgressBar();
  bar1.move();
}

function ProgressBar() {
  this.elem = document.getElementById("myBar"),
    this.width = 1;
  this.move = () => {
    this.id = setInterval(this.frame, 10);
  };
  this.frame = () => {
    if (this.width >= 100) {
      clearInterval(this.id);
    } else {
      this.width++;
      this.elem.style.width = this.width + '%';
    }
  };
}
#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: black;
}
<html>

<head>
  <title>
    This is a OO progress bar test.
  </title>
  <link rel="stylesheet" href="testOOProgressBar.css">
</head>

<body>
  <div id="myProgress">
    <div id="myBar"></div>
  </div>
  <br>
  <button id="barButton">Click Me</button>
  <script src="testOOProgressBar.js"></script>
</body>

</html>

它可以在不使用 .bind() 的情况下工作（如原始帖子中所述）。为什么？这个箭头函数案例和上一篇中的构造函数/原型案例有什么区别？

标签： javascripthtmlcssoop

解决方案

箭头函数没有自己的this，它的this继承和声明所在的函数。

推荐阅读