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

相关推荐
永远都不秃头的程序员(互关)27 分钟前
Java核心技术精要:高效实践指南
java·开发语言·性能优化
是Dream呀36 分钟前
Python圣诞特辑:打造一棵会唱歌、会下雪的魔法圣诞树
开发语言·python·pygame
未来之窗软件服务42 分钟前
幽冥大陆(四十一)美萍V10酒店门锁SDK C#语言仙盟插件——东方仙盟筑基期
开发语言·c#·仙盟创梦ide·东方仙盟·东方仙盟sdk·酒店智能门锁·东方仙盟 vos 智能浏览器
freedom_1024_2 小时前
红黑树底层原理拆解
开发语言·数据结构·b树
liu****2 小时前
3.链表讲解
c语言·开发语言·数据结构·算法·链表
小灰灰搞电子2 小时前
Rust 动态分发(dyn Trait)详解
开发语言·后端·rust
第二只羽毛2 小时前
C++ 高性能编程要点
大数据·开发语言·c++·算法
蓝瑟2 小时前
告别重复造轮子!业务组件多场景复用实战指南
前端·javascript·设计模式
老华带你飞2 小时前
旅游|基于Java旅游信息系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·旅游
爱学习的梵高先生3 小时前
C++:基础知识
开发语言·c++·算法