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

相关推荐
昭昭日月明11 分钟前
前端仔速通 Python
javascript·python
SailingCoder19 分钟前
Electron 安全IPC核心:contextBridge 安全机制
javascript·安全·electron
|_⊙35 分钟前
C++ 智能指针
开发语言·c++
WebInfra38 分钟前
Rsbuild 2.0 发布:即将支持 TanStack Start
前端·javascript·程序员
电子科技圈39 分钟前
IAR作为Qt Group独立BU携两项重磅汽车电子应用开发方案首秀北京车展
开发语言·人工智能·汽车·软件工程·软件构建·代码规范·设计规范
代码中介商40 分钟前
C语言指针深度解析:从数组指针到函数指针
c语言·开发语言
掘金安东尼1 小时前
OpenMUSE 全面详解:非扩散Transformer文生图开源基座(对标GPT Image 2)
前端·javascript·面试
Jasmine_llq1 小时前
《B4356 [GESP202506 二级] 数三角形》
开发语言·c++·双重循环枚举算法·顺序输入输出算法·去重枚举算法·整除判断算法·计数统计算法
止语Lab1 小时前
Go vs Java GC:同一场延迟战争的两条路
java·开发语言·golang
Rust研习社1 小时前
Rust 多线程从入门到实战
开发语言·后端·rust