外观
环境对象
约 301 字大约 1 分钟
2024-10-02
函数内部特殊的变量this, 它代表着当前函数运行时所处的环境, 使用this可以时我们的代码更加简洁.
this 的指向
- 函数的调用方式不同,
this指向的对象也不同. - 谁调用,
this就是谁是判断this指向的粗略规则. - 直接调用函数, 其实相当于是
windows.函数, 所以this指向windows.
举个例子
<script>
const Test = () => {
console.log(this)
}
Test()
</script>
到底有什么用
比如说, 点击一个按钮, 按钮自己改变颜色.
<button>按钮</button>
<script>
const But = document.querySelector("button")
But.addEventListener("click", function () {
this.style.backgroundColor = "#80ceff"
})
</script>如果我们用原来的方法, 代码是这样的.
<button>按钮</button>
<script>
const But = document.querySelector("button")
But.addEventListener("click", function () {
But.style.backgroundColor = "#80ceff"
})
</script>注意
这里不能使用箭头函数, 不然this指向的是函数了, 具体会在后面的this指向章节中详细介绍.
看起来好像没什么用, 那就康康下面的使用场景.

如果你不使用this, 就很难知道你鼠标悬浮的到底是哪一个标签(简化代码).
版权所有
版权归属:Erhai_lake