After posting a question about the JavaScript progress bar not working with object-oriented JavaScript code on Stack Overflow, I decided to try rewriting the script using arrow functions. Here is the new code:
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>Surprisingly, the code works without using .bind() as mentioned in the original post. What sets apart this arrow function implementation from the constructor/prototype approach discussed previously?