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

相关推荐
豆苗学前端5 分钟前
彻底讲透浏览器缓存机制,吊打面试官
前端·javascript·面试
swipe15 分钟前
箭头函数与 this 面试题深度解析:从原理到实战
前端·javascript·面试
进击的尘埃2 小时前
拖拽搭建场景下的智能布局算法:栅格吸附、参考线与响应式出码
javascript
小猪努力学前端2 小时前
基于PixiJS的试玩广告开发-续篇
前端·javascript·游戏
wuhen_n2 小时前
v-model 的进阶用法:搞定复杂的父子组件数据通信
前端·javascript·vue.js
wuhen_n2 小时前
TypeScript 深度加持:让你的组合式函数拥有“钢筋铁骨”
前端·javascript·vue.js
滕青山3 小时前
基于 ZXing 的 Vue 在线二维码扫描器实现
前端·javascript·vue.js
swipe3 小时前
深入理解 JavaScript 中的 this 绑定机制:从原理到实战
前端·javascript·面试
兆子龙3 小时前
前端哨兵模式(Sentinel Pattern):优雅实现无限滚动加载
前端·javascript·算法
豆苗学前端4 小时前
彻底讲透浏览器渲染原理,吊打面试官
前端·javascript·面试