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

相关推荐
半兽先生2 分钟前
使用 retire.js 自动检测前端 JavaScript 库漏洞
开发语言·前端·javascript
扶苏100223 分钟前
详解Vue3的自定义 Hooks
前端·javascript·vue.js
之歆1 小时前
HA 高可用集群指南
java·开发语言
lsx2024061 小时前
电子商务网站主机:选择与维护指南
开发语言
专注VB编程开发20年1 小时前
WebView2 处理跨域访问限制,Frame脚本执行,难度比CEF大10倍
前端·javascript·.net
wangluoqi2 小时前
c++ 逆元 小总结
开发语言·c++
BackCatK Chen2 小时前
第十五章 吃透C语言结构与数据形式:struct/union/typedef全解析
c语言·开发语言·数据结构·typedef·结构体·函数指针·联合体
瓦特what?2 小时前
插 入 排 序
开发语言·c++
m0_531237172 小时前
C语言-初始化赋值,函数,变量的作用域与生命周期
c语言·开发语言
Highcharts.js2 小时前
Highcharts角度仪表(Angular Gauge)完全指南:从速度表到工业监控,一文学会gauge与solidgauge实战开发
javascript·angular.js·开发文档·highcharts·图表开发·实心仪表