首页

前端JavaScript-刚学JS?了解一下this吧

myzbx 2025-07-21 16:28 32 浏览

在JavaScript中，this的行为与其他语言略有不同，所有很多新手朋友对它的怪异行为会感到困惑，关于this的文章也很多，讲得也很深，记起来也不容易，今天我们换个角度来介绍一下，看看这个this在这些情况下是怎么工作的。

什么是this

简而言之，就是对象的引用。你可能会问哪个对象？这取决于使用它的代码的上下文，而上下文取决于调用代码的范围。

在函数外执行

如果你在函数之外使用 this，即在全局上下文中，this 将指向全局对象，即窗口对象(NodeJS 全局范围内的 this 是当前 module.exports 对象，而不是全局对象。这与全局范围是全局窗口对象的浏览器不同, 咱们暂时忽略这个)。回想一下 window 对象允许 JS 引擎与浏览器的能力和功能进行交互。让我们通过示例来理解这一点：

在函数内执行

this 在函数内部的行为与外部函数相同，即 this 仍然指向全局对象。这是因为函数在没有对象上下文的情况下被调用：

在对象的方法里执行

在方法内部使用时，理解 this 的上下文会变得有点棘手。请记住 - this 的值取决于调用方法的方式，而不取决于定义方法的位置。例如，

但是，如果我们将 obj 的方法 printThis 分配给另一个变量，我们将在全局上下文中执行该方法。因此这将被分配给窗口。

请注意 this 的值如何取决于这些函数的调用方式。

重要 - 方法中的内部函数将具有全局范围，因为该函数将在没有对象上下文的情况下被调用

但是如果我们想让内部函数保留对象的上下文呢？有两种流行的方法可以实现这一点：

把this对象存起来

箭头函数
箭头函数从封闭函数中获取上下文，因此如果我们希望函数保留 this 的上下文，则更简洁：

在构造函数内执行

在构造函数（使用 new 关键字创建的函数）中使用 this 时，this 指向新创建的对象：

请记住在使用构造函数时使用 new 关键字，以避免在全局上下文中的函数内设置变量，从而最终污染它。

在类内执行

在 ES6 类中使用时，this 关键字指向使用new创建的当前对象（此行为类似于构造函数）

希望这篇文章对您理解this有所帮助。

JS this 关键词

上一篇：Java关键字:final，static，this，super
下一篇：图解javascript this指向什么?（彻底弄懂js中的this指向）

前端JavaScript-刚学JS?了解一下this吧

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿