我对里面的this指向还不是特别明白,老师指点一下下
来源:3-13 编程练习
卷毛奋斗中
2022-05-25 10:22:15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div {
width: 300px;
margin: 20px 0;
line-height: 30px;
background: yellowgreen;
}
</style>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<div id="box"></div>
<script>
// 在此补充代码
//获取元素
let startBtn = document.querySelector('#start');
let stopBtn = document.querySelector('#stop');
let box = document.querySelector('#box');
const show = {
content:'Hello World',
time: 0,
start:function(){
startBtn.addEventListener('click',() => {
this.timer = setInterval(() => {
box.innerHTML += `${this.content}`
},1000);
},false);
},
stop:function(){
stopBtn.addEventListener('click',() => {
clearInterval(this.timer);
},false);
}
}
show.start();
show.stop();
</script>
</body>
</html>1回答
同学你好,箭头函数中的this会沿着作用域向外查找,分别找到start和stop函数作用域中的this,该普通函数中的this指向show对象,所以箭头函数中的this指向show对象,才可以通过打点调用该对象下的content和timer属性。
可以输出测试下。示例:

输出结果如下:

另外,代码中有一个细节可以再优化下,在点击开始按钮,开启定时器时,删除之前的定时器,防止同时开启多个定时器,导致效果不对。示例:

祝学习愉快~
相似问题