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

相关推荐
用户4794928356915几秒前
从字符串满天飞到优雅枚举:JavaScript 常量管理的几种姿势
前端·javascript
无敌最俊朗@32 分钟前
C++后端总览
开发语言
多喝开水少熬夜38 分钟前
堆相关算法题基础-java实现
java·开发语言·算法
7澄11 小时前
Java 集合框架:List 体系与实现类深度解析
java·开发语言·vector·intellij-idea·集合·arraylist·linkedlist
用户18729422508391 小时前
告别函数的“两面派”人生:深度剖析箭头函数如何一劳永逸地解决 ‘this’ 的二义性
javascript
拉不动的猪1 小时前
关于scoped样式隔离原理和失效情况&&常见样式隔离方案
前端·javascript·面试
mit6.8241 小时前
一些C++的学习资料备忘
开发语言·c++
鹏北海1 小时前
Vue 3 超强二维码识别:多区域/多尺度扫描 + 高级图像处理
前端·javascript·vue.js
Jack莱杰1 小时前
Math.js封装工具库(解决前端因为浮点数导致计算错误)
javascript
Android疑难杂症1 小时前
一文讲清鸿蒙网络开发
前端·javascript·harmonyos