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

相关推荐
lly2024061 小时前
C# 变量作用域
开发语言
空白诗1 小时前
高级进阶 React Native 鸿蒙跨平台开发:slider 滑块组件 - 进度条与评分系统
javascript·react native·react.js
时艰.1 小时前
java性能调优 — 高并发缓存一致性
java·开发语言·缓存
MSTcheng.1 小时前
【C++】C++智能指针
开发语言·c++·智能指针
无小道1 小时前
Qt——网络编程
开发语言·qt
wazmlp0018873691 小时前
第五次python作业
服务器·开发语言·python
云深处@1 小时前
【C++11】部分特性
开发语言·c++
尘缘浮梦1 小时前
websockets简单例子1
开发语言·python
晓得迷路了1 小时前
栗子前端技术周刊第 116 期 - 2025 JS 状态调查结果、Babel 7.29.0、Vue Router 5...
前端·javascript·vue.js
jxy99981 小时前
mac mini 安装java JDK 17
java·开发语言·macos