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

相关推荐
你撅嘴真丑几秒前
STL练习
开发语言·c++·算法
Ulyanov4 分钟前
Impress.js深度技术解析:架构基础与结构化设计
开发语言·前端·javascript
bybitq5 分钟前
cmake构建c++项目时,vscode/cursor无法识别头文件路径,导致报错,解决方案
开发语言·c++·vscode
充气大锤11 分钟前
前端实现流式输出配合katex.js
开发语言·前端·javascript·ai·vue
无限进步_14 分钟前
二叉搜索树(BST)详解:从原理到实现
开发语言·数据结构·c++·ide·后端·github·visual studio
邝邝邝邝丹16 分钟前
vue2-computed、JS事件循环、try/catch、响应式依赖追踪知识点整理
开发语言·前端·javascript
郝学胜-神的一滴20 分钟前
机器学习特征选择:深入理解移除低方差特征与sklearn的VarianceThreshold
开发语言·人工智能·python·机器学习·概率论·sklearn
多多*25 分钟前
计算机网络相关 讲一下rpc与传统http的区别
java·开发语言·网络·jvm·c#
小旭952729 分钟前
【Java 基础】IO 流 全面详解
java·开发语言
吃吃喝喝小朋友33 分钟前
JavaScript事件
开发语言·前端·javascript