一：环境对象

阅读完本小节能够判断函数运行在不同环境中，this所指代的对象

1 什么是环境对象

环境对象是函数中的this变量，代表当前函数运行时多处的环境

2 this指向问题

粗略规则：谁调用函数，this就指向谁

<script>function fn() {console.log(this);//window}fn()const tx = document.querySelector('input')tx.addEventListener('input', function (e) {console.log(this);//input})
</script>

3 this的简单应用

 <button>点我</button><script>const tx = document.querySelector('button')tx.addEventListener('click', function (e) {// console.log(this);this.style.backgroundColor = 'red'})</script>
//因为this指向button，所以通过这种方式，点击button按钮后；
//button背景颜色改变

二：回调函数

1 什么是回调函数

将函数A作为参数传递给函数B，称函数A为回调函数

回调函数本质也是函数，只不过将因为其作为参数传递给别的函数；通过先执行某一操作后调用，随后函数才运行，所以称为回调函数

2 回调函数使用场景

function fn(){console.log('我是回调')
}
setInterval(fn,1000)
box.addEventListener('click',function(){console.log('我是回调')
})

三：综合案例(Tab栏切换)

需求：鼠标经过不同的选项卡，底部可以显示不同内容

1 鼠标经过超链接a实现变色效果

 // 1 鼠标经过实现超链接变色const colorA = document.querySelectorAll('.tab-nav a')for (let i = 0; i < colorA.length; i++) {colorA[i].addEventListener('mouseenter', function () {//遍历a为每个a添加//排他思想document.querySelector('.tab-nav .active').classList.remove('active')this.classList.add('active')})}

重点：

• 排他思想的应用
• for循环遍历思想

2 鼠标滑动实现盒子显示隐藏

//2 实现盒子的显示和隐藏
document.querySelector('.tab-content .active').classList.remove('active')
img[i].classList.add('active')

3 最终实现效果