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 分钟前
Vue子父组件.sync
javascript·vue.js·ecmascript
灰灰勇闯IT7 分钟前
Flutter for OpenHarmony:布局组件实战指南
前端·javascript·flutter
cici158748 分钟前
基于MATLAB的TERCOM算法实现与优化
开发语言·matlab
天上飞的粉红小猪9 分钟前
c++的IO流
开发语言·c++
学嵌入式的小杨同学24 分钟前
【嵌入式 Linux 实战 1】Ubuntu 环境搭建 + 目录结构详解:嵌入式开发入门第一步
linux·c语言·开发语言·数据结构·vscode·vim·unix
⑩-28 分钟前
JUC-场景题
java·开发语言
a程序小傲34 分钟前
京东Java面试被问:基于Gossip协议的最终一致性实现和收敛时间
java·开发语言·前端·数据库·python·面试·状态模式
tqs_1234537 分钟前
Spring Boot 的自动装配机制和 Starter 的实现原理
开发语言·python
程序员小白条41 分钟前
面试 Java 基础八股文十问十答第二十二期
java·开发语言·数据库·面试·职场和发展·毕设