Question

解决方案：我没有将 stopHandler 绑定到构造函数内的实例。

我定义了一个类，并使用它使事件处理程序功能和工作与预期不同。

我的班级致力于呈现时间观。在类的实例内部，每个数据属性保留时间（小时，分钟，秒等）的值和方法是事件处理程序。

只有两个按钮； ID为 start 和 stop ，并且每个链接都链接到 startHandler 和 stopHandler 。

要进行迭代，我使用了 setInterval 和 clearInterval ，因此它可以实时显示当前时间。要停止显示时间，我必须删除 setHandler ，因此我保存了 setInterval 的引用，并将其与中的 clearInterval 一起使用 stopHandler 方法。

以下是代码：

class Timer {
	constructor () {
		this.now = 0
		this.isDayOrNight = ""
		this.hours = 0
		this.minutes = 9
		this.seconds = 0
		this.milliseconds = 0
		this.view = ""

		this.setHandler = this.setHandler.bind(this)
		this.startHandler = this.startHandler.bind(this)
		this.intervalRef
	}

	setHandler() {
		this.now = new Date()
		this.hours = this.now.getHours()
		this.isDayOrNight = (this.hours >= 12) ? "PM" : "AM"
		this.minutes = this.now.getMinutes()
		this.seconds = this.now.getSeconds()
		this.milliseconds = this.now.getMilliseconds()

		this.view = "<p>The time right now: "  + this.isDayOrNight + " " + this.hours + " : " + this.minutes + " : " + this.seconds + " : " + this.milliseconds + "</p>"
		document.getElementById("view").innerHTML = this.view
	}

	startHandler() {
		console.dir(event)
		if (this.view !== "") {
			// clearInterval(this.intervalRef)
			// this.intervalRef = setInterval(this.setHandler, 100)
		}
		else {
			this.intervalRef = setInterval(this.setHandler, 100)
		}
		console.log(this)
		// Timer {now: 0, isDayOrNight: "", hours: 0, minutes: 9, seconds: 0, …}
		console.log(this.intervalRef)
	}

	stopHandler() {
		console.dir(event)
		console.log(this)
		// <button id="stop">STOP</button>
		console.log(this.intervalRef)
		// clearInterval(this.intervalRef)
	}
}

let timer = new Timer()
document.getElementById("start").addEventListener("click", timer.startHandler)
document.getElementById("stop").addEventListener("click", timer.stopHandler)

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Default HTML template</title>
	</head>

	<body>
		<div id="view"></div>
		<button id="start">START</button>
		<button id="stop">STOP</button>
		<script src="./script.js"></script>
	</body>
</html>

这时出现问题。

我希望在 stopHandler 中的 this 指向我创建的实例（ new Timer（）），但似乎 this 指向发生“ click”事件的元素。我可以通过查看控制台窗口来找出这一点。

但是，另一方面， startHandler 中的 this 指向了我创建的实例，这与我预期的一样。

这种情况还好吗？这些 this 如何绑定到不同的事物？

“ this”与类的不同绑定

0 个答案: