JS初步了解this

什么是环境对象?
环境对象:指的是函数内部特殊的变量this ,它代表着当前函数运行时所处的环境

作用:弄清楚this的指向,可以让我们代码更简洁
在普通函数中:

javascript 复制代码
    // 每个函数里面都有this 普通函数的this指向window
    function fun() {
        console.log(this) //指向window
    }
    // 相当于window.fun()
    fun()

如果我们使用事件呢?这个this又指向谁?

函数调用方式不同,this指代的对象也不同

javascript 复制代码
    let btn = document.querySelector("button")
    btn.onclick = function() {
        console.log(this) //指向btn按钮
    }

记住一句话: 谁调用,this就指向谁

在以前的时候,如果我们想点击按钮之后,按钮变颜色

javascript 复制代码
btn.style.color = "red"

现在我们有了this之后,我们点了谁,自己变颜色

javascript 复制代码
this.style.color = "red"


本篇文章初步的介绍了一下this,日后会写关于this的高级用法,感谢大家的阅读!

相关推荐
Reggie_L7 分钟前
RabbitMQ -- 保障消息可靠性
开发语言·后端·ruby
何中应17 分钟前
如何截取PDF内容为图片
java·开发语言·后端·pdf
拉不动的猪1 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛1 小时前
next.js项目部署流程
开发语言·前端·javascript
爱幻想-hjyp1 小时前
【Python】uv包管理器常用命令
开发语言·python·uv
非凡ghost1 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
哈皮Superman1 小时前
【Research】MagicFuzzer: Scalable deadlock detection for large-scale applications
java·开发语言·数据库
lly2024061 小时前
NoSQL 简介
开发语言
千里马-horse1 小时前
Boost.Iostreams 简介
开发语言·c++·boost
神膘护体小月半1 小时前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue