本文详解JavaScript中this关键字在不同场景下的指向规则，包括全局函数、事件属性及对象方法中的差异。结合自定义属性的应用，通过Tab选项卡案例演示如何绑定索引与事件，实现标签页的切换逻辑，提供完整代码与注意事项。
1. this关键字
this始终指向当前执行上下文中的元素。
在全局函数中，this指向window对象。
当在代码中声明一个全局函数时，该函数属于浏览器窗口对象，因此函数内部的this表示的就是浏览器窗口对象window。
function fn() {
consolo.log(this);
}
fn()
在标签的事件属性中调用函数时，this指向window对象。
例如，如果将一个全局函数在HTML标签的属性中直接调用，如下所示：
<button onclick="fn()">点我试试</button>
function fn() {
console.log(this)
}
在标签对象的事件属性中声明的函数，其this指向当前被操作的标签元素。
当在标签对象的属性上定义一个函数时，该函数属于标签属性的一部分，因此函数内部的this指向当前标签对象本身。
<button id="btn">点我试试</button>
var btn = document.getElementById('btn');
btn.onclick = function() {
console.log(this);
}
2. 自定义属性
在前端网页开发中，JavaScript主要操作标签对象。在某些特定场景下，需要通过设置自定义属性来辅助对标签进行更灵活的操作。
基本语法格式为：element.属性名 = 属性值。
var btn = document.getElementById('btn');
btn.index = 1;
3. 综合案例1：Tab选项卡的实现
实现步骤如下： 1. 首先完成静态页面的设计（HTML与CSS代码见附录部分）。
2. 获取页面中所需的DOM元素。
var uli = document.querySelector('ul').querySelectorAll('li');
var oli = document.querySelector('ol').querySelectorAll('li');
3. 通过for循环为获取到的元素添加点击事件监听器。
for (var i = 0; i < uli.length; i++) {
uli[i].addEventListener('click', function () {
} )
}
4. 为元素添加自定义属性，以便给对应的选项卡绑定索引号。
uli[i].index = i;
在点击事件中处理对应的样式切换（完整代码见附录）。
for (var i = 0; i < uli.length; i++) {
uli[i].index = i;
uli[i].addEventListener('click', function () {
for (var j = 0; j < uli.length; j++) {
uli[j].className = '';
oli[j].className = '';
}
this.className = 'current';
oli[this.index].className = 'current';
})
}
注意：本案例通过添加类名来实现对应选项卡的显示与隐藏。在为目标元素添加特定类名之前，必须先清除所有相关元素的类名，以确保状态正确。
附录
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
height: 250px;
width: 300px;
border: 2px solid;
}
ul {
display: flex;
justify-content: space-between;
background: red;
border-bottom: 2px #ccc;
}
ul li {
float: left;
width: 100px;
color: #fff;
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
}
ul li.current {
border-bottom: 5px green solid;
}
ol li {
margin: 30px;
display: none;
}
ol li.current {
display: block;
}
</style>
<div class="box">
<ul>
<li class="current">第一页</li>
<li>第二页</li>
<li>第三页</li>
</ul>
<ol>
<li class="current">我是第一页</li>
<li>我是第二页</li>
<li>我是第三页</li>
</ol>
</div>
总结
本文到此结束，希望能为读者提供帮助，同时也欢迎大家关注本站以获取更多技术内容。