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

相关推荐
遂心_3 分钟前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_5 分钟前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
Aomnitrix8 分钟前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
每天回答3个问题38 分钟前
UE5C++编译遇到MSB3073
开发语言·c++·ue5
森林的尽头是阳光39 分钟前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
YiHanXii41 分钟前
React.memo 小练习题 + 参考答案
前端·javascript·react.js
zero13_小葵司1 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_20221 小时前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js
Pu_Nine_91 小时前
深入理解节流(Throttle):原理、实现与应用场景
javascript·性能优化·es6·节流·lodash 库
伍哥的传说1 小时前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox