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

相关推荐
洛豳枭薰1 分钟前
jvm运行时数据区& Java 内存模型
java·开发语言·jvm
lsx2024067 分钟前
Perl 错误处理
开发语言
摘星编程8 分钟前
React Native for OpenHarmony 实战:SegmentControl 分段控件详解
javascript·react native·react.js
甄心爱学习8 分钟前
KMP算法(小白理解)
开发语言·python·算法
摘星编程12 分钟前
React Native for OpenHarmony 实战:ProgressRing 环形进度详解
javascript·react native·react.js
zephyr0526 分钟前
C++ STL unordered_set 与 unordered_map 完全指南
开发语言·数据结构·c++
TAEHENGV33 分钟前
React Native for OpenHarmony 实战:数学练习实现
javascript·react native·react.js
CDwenhuohuo33 分钟前
安卓app巨坑 nvue后者页面要写画笔绘制功能nvue canvas
前端·javascript·vue.js
Never_Satisfied43 分钟前
在JavaScript / HTML中,HTML元素自定义属性使用指南
开发语言·javascript·html
Ulyanov1 小时前
大规模战场数据与推演:性能优化与多视图布局实战
开发语言·python·性能优化·tkinter·pyvista·gui开发