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

相关推荐
光影少年7 分钟前
vue中,created和mounted两个钩子之间调用时差值受什么影响
前端·javascript·vue.js
crazyme_614 分钟前
深入掌握 Python 切片操作:解锁数据处理的高效密码
开发语言·python
邹诗钰-电子信息工程1 小时前
嵌入式自学第二十一天(5.14)
java·开发语言·算法
恋猫de小郭1 小时前
如何查看项目是否支持最新 Android 16K Page Size 一文汇总
android·开发语言·javascript·kotlin
赵大仁2 小时前
React Native 与 Expo
javascript·react native·react.js
于壮士hoho2 小时前
Python | Dashboard制作
开发语言·python
程序员与背包客_CoderZ3 小时前
Node.js异步编程——Callback回调函数实现
前端·javascript·node.js·web
Asus.Blogs3 小时前
为什么go语言中返回的指针类型,不需要用*取值(解引用),就可以直接赋值呢?
开发语言·后端·golang
青瓦梦滋3 小时前
【语法】C++的多态
开发语言·c++
C_V_Better3 小时前
Java Spring Boot 控制器中处理用户数据详解
java·开发语言·spring boot·后端·spring