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

相关推荐
ghie90908 分钟前
MATLAB中编写不平衡磁拉力方程
开发语言·matlab
weixin_4521595517 分钟前
C++与Java性能对比
开发语言·c++·算法
会叫的恐龙21 分钟前
C++ 核心知识点汇总(第一日)(输入输出与变量、类型转换)
开发语言·c++
2301_7657031424 分钟前
C++中的工厂模式实战
开发语言·c++·算法
电商API&Tina29 分钟前
电商数据采集 API 接口 全维度解析(技术 + 商业 + 合规)
java·大数据·开发语言·数据库·人工智能·json
小白学大数据32 分钟前
实测数据:多进程、多线程、异步协程爬虫速度对比
开发语言·爬虫·python·php
摘星编程37 分钟前
用React Native开发OpenHarmony应用:StickyHeader粘性标题
javascript·react native·react.js
A_nanda41 分钟前
c# 用VUE+elmentPlus生成简单管理系统
javascript·vue.js·c#
sonrisa_1 小时前
Python同一类不同方法中变量值的传递
开发语言·windows·python
天天进步20151 小时前
Motia事件驱动的内核:深入适配器(Adapter)层看消息队列的流转
javascript