彻底理解Javascript中的THIS

最新推荐文章于 2022-03-03 16:13:54 发布

CoderGaoKK

最新推荐文章于 2022-03-03 16:13:54 发布

阅读量435

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/qq_35895679/article/details/106190597

本文详细介绍了JavaScript中THIS的五种情况：事件绑定、普通函数执行、构造函数执行、箭头函数以及call/apply/bind，并强调了THIS不是执行上下文，而是执行主体。分析了如何区分执行主体，特别讨论了箭头函数没有自己的THIS，以及在不同场景下THIS的指向问题。最后，通过一个实例解析了函数执行时的作用域链和THIS的确定过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS中THIS的五种情况

事件绑定
普通函数执行
构造函数执行
箭头函数
call/apply/bind

THIS：全局上下文中的THIS是WINDOW；块级上下文中没有自己的THIS,它的THIS是继承所在上下文中的THIS的；在函数的私有上下文中，THIS的情况会多种多样，也是接下来我们重点研究的；
THIS不是执行上下文(EC才是执行上下文)，THIS是执行主体
例如：Tom拿着鸡蛋灌饼去公司吃早餐（事情本身是吃早餐，Tom吃早餐，这件事情的主体是Tom【THIS】，在公司吃，公司是事情发生所在的上下文【EC】）

全局上下文中的THIS是WINDOW；

var a =1 ;
a;//=>1
window.a;//=>1
this.a;//=>1

块级上下文中没有自己的THIS,它的THIS是继承所在上下文中的THIS的；
2.1 块级上下文中没有自己的THIS

{
    let a = 12;//var a = 12;
    console.log(this);
}
//打印出window 
Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

2.2 块级上下文中的THIS是继承所在上下文中的THIS的

let obj={
    fn(){
        {
            let a = 12;
            console.log(this);
        }
    }
}
obj.fn();//=> {fn: ƒ} 打印出obj这个对象

如何区分执行主体：

事件绑定：给元素的某个事件行为绑定方法，当事件行为触发，方法执行，方法中的THIS是当前元素本身（特殊：IE6~8中基于attachEvent方法实现的DOM2事件绑定，事件触发，方法中的THIS是WINDOW而不是元素本身）

//DOM0级 事件绑定 
let body = document.body;
//给body这个元素绑定点击事件，当点击body这个元素的时候触发这个函数
body.onclick = function () {
    //事件触发，方法执行的时候，方法中的this才是body
     console.log(this)
}
//点击body元素，执行这个函数，打印出 <body>…</body>

如果函数不执行，函数只是一个堆，在这个堆内存中函数体中的代码只是一堆字符串，此时的this什么也代表不了。只有函数执行的时候才会形成私有的执行上下文(EC)，在这整个过程中才会有初始化this以及this指向谁的这一步。所以必须方法执行才知道this指向谁。

//DOM2级 事件绑定：在标准浏览器中 默认第三个参数不传递的时候是false冒泡
let body = document.body;
body.addEventListener('click',function(){
    console.log(this);
});
//点击body元素，执行这个函数，打印出 <body>…</body>

//DOM2级 事件绑定：在标准浏览器中 默认第三个参数不传递的时候是false冒泡
let body = document.body;
body.attachEvent('click',function(){
    console.log(this);
})
//IE6、7、8下的这个this就不再是这个元素本身，而是代指window

普通方法执行（包含自执行函数执行、普通函数执行、对象成员访问调取方法执行等）：只需要看函数执行的时候，方法名前面是否有“点”，有“点”，“点”前面是谁THIS就是谁，没有“点”THIS就是WINDOW[非严格模式]/UNDEFINED[严格模式]
一般默认是非严格模式，只有加"use strict"才是严格模式