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的高级用法,感谢大家的阅读!

相关推荐
谢小飞38 分钟前
构建前端监控体系:Sentry私有化部署与项目集成实践
javascript·监控
superman超哥38 分钟前
Rust API 设计的零成本抽象原则:性能与表达力的完美统一
开发语言·后端·rust·rust api·抽象原则·性能与表达力
云栖梦泽40 分钟前
Rust语言:系统级编程的新时代选择
开发语言
qq_4061761440 分钟前
什么是模块化
开发语言·前端·javascript·ajax·html5
周小码42 分钟前
CodeEdit:Electron编辑器的原生替代品?
javascript·electron·编辑器
superman超哥43 分钟前
Rust 所有权的三大基本规则:内存安全的类型系统基石
开发语言·后端·rust·内存安全·rust所有权·基本规则·系统基石
菩提祖师_44 分钟前
量子计算在网络安全中的应用
开发语言·javascript·爬虫·flutter
技术钱1 小时前
vue3 + element plus实现表头拖拽数组进行汇总
前端·javascript·vue.js
superman超哥1 小时前
Rust 线程安全性保证(Send 与 Sync):编译期并发安全的类型系统
开发语言·后端·rust·编程语言·并发安全·send与sync·rust线程
柒@宝儿姐1 小时前
vue3中使用element-plus的el-scrollbar实现滚动触底加载更多
前端·javascript·vue.js