关键字this的指向

如果可以，可以如果

于 2022-06-22 19:28:07 发布

阅读量424

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43687594/article/details/125415281

本文详细介绍了JavaScript中不同场景下this的指向问题，包括普通函数、定时器、自调用函数、对象方法、事件处理函数以及箭头函数。强调了箭头函数的this继承自上层环境，并通过实例解析了this的复杂行为，帮助读者理解JavaScript中this的关键概念。

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

文章目录

每个函数内容里都有一个关键字叫做this。不同的情况下，this代表的内容也是不一样的。
箭头函数没有this，箭头函数的this是它所处的上层环境的this。
普通函数可以通过事件、apply/call等改变this指向，但是和箭头函数通通没有关系。

1. 普通函数中的this代表window

function fn(){
    console.log(this);
}
fn(); //this就是--> window

2. 定时器中的this代表window

var obj = {
    eat:function(){
        setTimeout(function(){
            console.log(this);
        });
    }
};
obj.eat(); // this就是-->window

3. 自调用函数中的this代表window

document.querySelector("button").onclick=function(){
    (function(){
        console.log(this);
    })()
}
// this就是-->window

4. 对象方法中的this代表调用这个方法的对象

注意：这里的this不是方法，不是方法，不是方法。

var obj = {
    skill:function(){
        console.log(this);
    }
};
obj.skill(); // this就是-->obj

5. 事件函数中的this代表当前事件的事件源

也就是说事件函数中，谁调用，this就指向谁。

document.querySelector("button").onclick=function(){
    console.log(this);
}
//this就是--> <button>按钮</button>

6.箭头函数的this指向上层环境中的this

箭头函数没有this，箭头函数的this是它所处的上层环境的this。在定时器内部定义了一个箭头函数，在这里没有自身的this指向，指向上层环境中的this，上层环境就是button按钮点击事件，所以这里的this就是button按钮。

document.querySelector("button").onclick=function(){
    // 这里的this代表button按钮，也就是定时器内的箭头函数的上层环境，所以定时器内部的箭头函数的this就是button按钮
    setTimeout(()=>{console.log(this);});
}
//this就是--> <button>按钮</button>