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

相关推荐
用户6802659051199 小时前
2026年企业级网络监控选型指南
javascript·后端·面试
世转神风-10 小时前
qt-通信协议基础-double转成QbyteArray-小端系统
开发语言·qt
web3.088899910 小时前
小红书笔记评论API接口详情展示
开发语言·笔记·python
手抄二进制10 小时前
使用Anaconda创建python环境并链接到Jupyter
开发语言·python·jupyter
WX-bisheyuange10 小时前
基于Spring Boot的社团管理系统的设计与实现
前端·javascript·vue.js·毕业设计
橙某人10 小时前
LogicFlow 插件魔改实录:手把手教你重写动态分组(DynamicGroup)🛠️
前端·javascript·vue.js
古城小栈10 小时前
go-zero 从入门到实战 全指南(包的)
开发语言·后端·golang
lsx20240610 小时前
Python 3 函数
开发语言
-To be number.wan10 小时前
C++ 进阶技巧:如何让 cout << 自定义对象 正常输出?
开发语言·c++
2501_9444460010 小时前
Flutter&OpenHarmony状态管理方案详解
开发语言·javascript·flutter