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

相关推荐
01_ice12 分钟前
C语言数据在内存中的存储
c语言·开发语言
代码村新手15 分钟前
C++-二叉搜索树
开发语言·c++
她说人狗殊途1 小时前
基于 vue-cli 创建
前端·javascript·vue.js
大家的林语冰2 小时前
Deno 2.8 正式发布,再次超越 Bun,史上最大的次版本升级诞生!
前端·javascript·node.js
吃好睡好便好2 小时前
创建魔方矩阵和单位矩阵
开发语言·人工智能·学习·线性代数·matlab·矩阵
影寂ldy2 小时前
C#数组的属性和方法(Clear / Copy / IndexOf )
开发语言·javascript·c#
i7i8i9com2 小时前
Hermes Agent 安装记录
开发语言·bash·hermes
Brave & Real2 小时前
小程序 const 在js中以及与同类的var和let之间的差异
javascript·微信小程序·小程序
小娄~~3 小时前
C语言卷子错题集
c语言·开发语言·数据结构
米丘3 小时前
React 19.x 的 lazy 与 Suspense
前端·javascript·react.js