函数内部特殊的变量this, 它代表着当前函数运行时所处的环境, 使用this可以时我们的代码更加简洁.

this 的指向

1. 函数的调用方式不同, this指向的对象也不同.
2. 谁调用, this就是谁是判断this指向的粗略规则.
3. 直接调用函数, 其实相当于是windows.函数, 所以this指向windows.

举个例子

<script>
    const Test = () => {
        console.log(this)
    }
    Test()
</script>

4e65f8f90701ebf31019127dfc728cb3a7e8df5f

到底有什么用

比如说, 点击一个按钮, 按钮自己改变颜色.

<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指向章节中详细介绍.

看起来好像没什么用, 那就康康下面的使用场景.

a37bfdab7758514bf1dd235916a5fdceff77081c

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

版权所有

版权归属：Erhai_lake

许可证：署名 4.0 国际 (CC-BY-4.0)

编辑此页

贡献者: Erhai_lake, Erhai-lake, 洱海

上一页事件参数传递

下一页回调函数