老师请检查
来源：5-2 自由编程
月入过亿
2022-11-18 10:26:34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Class 的应用</title>
<link rel="stylesheet" href="./slider.css" />
</head>
<body>
<div class="slider-layout">
<div class="slider">
<div class="slider-content">
<div class="slider-item">
<a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>
</div>
<div class="slider-item">
<a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>
</div>
<div class="slider-item">
<a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>
</div>
<div class="slider-item">
<a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>
</div>
</div>
<!-- 左右按钮 -->
<a href="javascript:;" class="leftbtn" id="leftbtn"><</a>
<a href="javascript:;" class="rightbtn" id="rightbtn">></a>
</div>
</div>
<script src="./base.js"></script>
<script>
// console.log(BaseSlider);
const leftbtn = document.querySelector('.leftbtn');
const rightbtn = document.querySelector('.rightbtn');
const slider = document.querySelector('.slider');
// 继承(原始幻灯片)父类的方法
class Slider extends BaseSlider {
constructor(el, options) {
super(el, options);
// 调用自己的方法
this._bindEvent();
this._leftbtn();
this._rightbtn();
this._slider();
}
_bindEvent() {
document.addEventListener('keyup', e => {
console.log(e.keyCode);
// ← A
if (e.keyCode === 37 || e.keyCode === 65) {
this.prev()
}
// → D
else if (e.keyCode === 39 || e.keyCode === 68) {
this.next();
}
})
}
_leftbtn() {
leftbtn.addEventListener('click', ()=>{
this.prev();
console.log(this);
})
}
_rightbtn() {
rightbtn.addEventListener('click', () => {
this.next();
})
}
_slider(){
slider.addEventListener('mouseenter',()=>{
leftbtn.style.display='block';
rightbtn.style.display='block';
})
slider.addEventListener('mouseleave',()=>{
leftbtn.style.display='none';
rightbtn.style.display='none';
})
}
}
// 实例化对象
new Slider((slider), {
initialIndex: 1,
animation: true,
speed: 2000
})
</script>
</body>
</html>老师我还有个问题，左右按钮的点击事件，为啥换成普通函数之后就会报错，显示没有this.prev()这个方法，换成箭头函数就没有错误了
写回答
1回答
-
同学你好，代码是对的，很棒，问题回复如下：
事件处理函数，如果使用普通函数，那么里面的this指向dom元素：
该规则，之前讲过，可以回顾一下：
https://class.imooc.com/lesson/2124#mid=50533
此时this.next，就是获取“rightbtn上的next方法”。由于next方法处于实例上，而非dom元素rightbtn上，所以this.next无法获取到，会报错。
换成箭头函数后，由于箭头函数中this没有具体指向，需要沿着作用域链查找this指向谁：
因此换成箭头函数后，this就会指向实例：
此时this.next，就是获取“实例上的next方法”，因此可以正常获取到。
祝学习愉快！
0
