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

相关推荐
Yvonne爱编码6 分钟前
深入剖析 Java 中的深拷贝与浅拷贝:原理、实现与最佳实践
java·开发语言
意法半导体STM327 分钟前
【官方原创】如何基于DevelopPackage开启安全启动(MP15x) LAT6036
javascript·stm32·单片机·嵌入式硬件·mcu·安全·stm32开发
索荣荣11 分钟前
Java关键字终极指南:从入门到精通
java·开发语言
悟能不能悟11 分钟前
SimpleDateFormat 为什么线程不安全
开发语言·安全
沉默-_-15 分钟前
掌握Maven:高效Java项目构建与管理
java·开发语言·后端·maven
一晌小贪欢16 分钟前
Python 魔术方法实战:深度解析 Queue 模块的模块化设计与实现
开发语言·分布式·爬虫·python·python爬虫·爬虫分布式
wangbing112517 分钟前
从lambda 表达式引用的本地变量必须是最终变量或实际上的最终变量
java·开发语言
奔跑的web.26 分钟前
TypeScript namespace 详解:语法用法与使用建议
开发语言·前端·javascript·vue.js·typescript
你怎么知道我是队长31 分钟前
win11系统查看设备配置
android·java·javascript
倾国倾城的反派修仙者33 分钟前
鸿蒙开发——使用弹窗授权保存媒体库资源
开发语言·前端·华为·harmonyos