目录
前言
男儿何不带吴钩，收取关山五十州
目标
能够分析判断函数运行在不同环境中this所指代的对象
环境对象
指的是函数内部特殊的变量this，它代表当前函数运行时所处的环境
作用
弄清楚this的指向，可以使代码更简洁
函数的调用方式不同，this所指代的对象不同
[谁调用，this就是谁] 是判断this指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以this 指代 window
环境对象this是什么？
它代表着当前函数运行时所处的环境
判断this指向的粗略规则是什么？
谁调用，this就是谁
回调函数
目标
能够说出什么是回调函数
如果将函数 A做为参数传递给函数 B时，我们称函数 A为回调函数简单理解:当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
常见的使用场景
function fn(){console.log('我是回调函数...')fn传递给了setInterval，fn就是回调函数setInterval(fn，1000)
综合案例：Tab任务栏切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tab {
width: 100%;
height: 100%;
}
.tab-nav {
width: 490px;
height: 40px;
background-color: #fff;
border: 1px solid #020202;
display: flex;
align-items: center;
}
.tab-nav ul {
list-style-type: none;
padding-left: 0;
margin: 0;
display: flex;
}
.tab-nav ul li {
margin-right: 20px;
height: 40px;
display: flex;
align-items: center;
}
.tab-nav ul li a {
text-decoration: none;
color: inherit;
padding: 0 10px;
}
.tab-nav ul li a:hover {
color: red;
}
.tab-nav ul li:hover {
background-color: gray;
}
.tab-nav h3 {
margin-right: 20px;
margin-left: 20px;
}
.tab-content {
width: 450px;
padding: 20px;
border: 1px solid #020202;
border-top: none;
height: 300px;
/* 增加高度以容纳更多内容 */
overflow-y: auto;
/* 添加滚动条 */
}
.tab-content .item {
display: none;
margin-bottom: 20px;
}
.tab-content .item.active {
display: block;
}
.item h2 {
color: #333;
}
.item p {
color: #666;
}
.item img {
max-width: 100%;
height: auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<h3>每日特价</h3>
<ul>
<li><a class="active" href="javascript:;">精选</a></li>
<li><a href="javascript:;">美食</a></li>
<li><a href="javascript:;">百货</a></li>
<li><a href="javascript:;">母婴</a></li>
<li><a href="javascript:;">图书</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active">
<h2>精选内容</h2>
<p>这里是精选内容的描述。</p>
<img src="https://via.placeholder.com/150" alt="精选图片">
</div>
<div class="item">
<h2>美食内容</h2>
<p>这里是美食内容的描述。</p>
<img src="https://via.placeholder.com/150" alt="美食图片">
</div>
<div class="item">
<h2>百货内容</h2>
<p>这里是百货内容的描述。</p>
<img src="https://via.placeholder.com/150" alt="百货图片">
</div>
<div class="item">
<h2>母婴内容</h2>
<p>这里是母婴内容的描述。</p>
<img src="https://via.placeholder.com/150" alt="母婴图片">
</div>
<div class="item">
<h2>图书内容</h2>
<p>这里是图书内容的描述。</p>
<img src="https://via.placeholder.com/150" alt="图书图片">
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const tabs = document.querySelectorAll('.tab-nav ul li a');
tabs.forEach((tab, index) => {
tab.addEventListener('mouseenter', function () {
showTab(index);
});
});
function showTab(index) {
const tabs = document.querySelectorAll('.tab-nav ul li a');
const contents = document.querySelectorAll('.tab-content .item');
tabs.forEach(tab => tab.classList.remove('active'));
contents.forEach(content => content.classList.remove('active'));
tabs[index].classList.add('active');
contents[index].classList.add('active');
}
});
</script>
</body>
</html>总结
莫等闲，白了少年头，空悲切。