网站首页 > 技术文章 正文
在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有所帮助。
猜你喜欢
- 2025-04-30 搞懂JS模块各个写法(搞懂js模块各个写法是什么)
- 2025-04-30 2025 年每个 JavaScript 开发者都应该了解的功能
- 2025-04-30 前端人必看!这 10 个 JavaScript 技巧,让你代码效率狂飙 99%!
- 2024-09-10 一文彻底搞懂JavaScript前端5大模块化规范及其区别
- 2024-09-10 「JavaScript 教程」入门篇-JavaScript 的基本语法
- 2024-09-10 前端基础:JavaScript是如何工作的?聊聊引擎,运行时和调用堆栈
- 2024-09-10 前端工程化应该怎么做?Letjs工程化体系介绍
- 2024-09-10 JavaScript与jQuery: 前端开发的基石
- 2024-09-10 前端基础:JavaScript
- 2024-09-10 JS从看懂到看开(前端面试题整合)
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)