JavaScript 中的 this 关键字详解

最新推荐文章于 2025-12-12 14:24:05 发布
最新推荐文章于 2025-12-12 14:24:05 发布
阅读量72 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AvskBug/article/details/133454502
前端 专栏收录该内容
299 篇文章 ¥59.90 ¥99.00
订阅专栏
本文详细探讨了JavaScript中this关键字在全局上下文、函数上下文（包括函数调用、方法调用、构造函数调用及apply()和call()调用）、箭头函数中的行为。理解this的工作原理对编写高质量的前端代码至关重要。

在 JavaScript 中，this 是一个关键字，它在不同的上下文中引用不同的对象。理解 this 的工作原理对于编写高质量的 JavaScript 代码至关重要。本文将深入探讨 this 关键字在前端开发中的应用，并提供相应的源代码示例。

1. 全局上下文中的 this

在全局上下文中，this 引用的是全局对象。在浏览器环境中，全局对象是 window 对象；而在 Node.js 环境中，全局对象是 global 对象。

console.log(this === window); // 在浏览器环境中输出 true
console.log
了解本专栏 订阅专栏 解锁全文
javascript 中 this 关键字详解
柯晓楠
08-06 1343
此时 bar 函数，也就是 obj 上的 foo 方法为什么又指向了全局对象呢，是因为 bar 方法此时是作为函数独立调用的，所以此时的场景属于默认绑定，而不是隐式绑定。执行时箭头函数中 this 是全局 window，首先打印出 window 上的属性 a 的值 20，箭头函数返回了一个原型上有个值为 50 的属性 a 的函数对象 func 给 bar；而 bind 方法是设置 this 为给定的值，并返回一个新的函数，且在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。
javascript中this关键字详解
周粥舟轴的博客
09-10 258
javascript中this关键字详解 1.涵义 1.1：this涵义 this关键字总是返回一个对象。再说的详细一些，就是属性或方法“当前”所在的对象。 var Keith = { firstName: 'Chou', describe: function() { return this.firstName; } }; console.log(Keith.describe()); //'Chou' 上面代码中.
JavaScript中的this关键字详解
yk_dflkg的博客
04-22 1245
this是JavaScript中的一个关键字，表示函数运行时的调用上下文。this的值在函数被调用时确定，而不是在定义时确定。this的值取决于函数的调用方式：全局调用:this指向全局对象（浏览器中是window对象方法调用:this指向调用该方法的对象构造函数调用:this指向新创建的实例使用callapplybindthis指向指定的对象箭头函数没有自己的this，它继承自外部作用域。this在普通函数和箭头函数中的行为差异是JavaScript中最容易混淆的概念之一。
JavaScript中this关键字详解
Rice_w的博客
04-10 1043
this关键字 this的指向有三个基本要素 this指向的永远只可能有对象 this指向谁，永远不取决于this写在哪，而是取决于函数在哪调用 this指向的对象，称为函数的上下文，也叫函数的调用者 this指向的规律 this指向的是函数的调用者，而不是函数的声明者 1.函数名（）直接调用 通过函数名（）直接调用 通过函数名直接调用，this指向window对象 function fun(){ console.log(this); } var
Javascript中this关键字详解
avclk66666的专栏
05-27 144
Javascript中this关键字详解 2012-11-01 08:23 by Justany_WhiteSnow,9376阅读,23评论,收藏,编辑 Quiz 请看下面的代码，最后alert出来的是什么呢？ 1 var name = "Bob"; 2 var nameObj ={ 3 name : "Tom", 4...
c 语言this关键字的作用,javascript中this关键字详解
weixin_35377028的博客
05-17 603
不管学习什么知识，习惯于把自己所学习的知识列成一个list，会有助于我们理清思路，是一个很好的学习方法。强烈推荐。以下篇幅有点长，希望读者耐心阅读。以下内容会分为如下部分：1.涵义1.1：this涵义1.2：this指向的可变性2.使用场合2.1：全局环境2.2：构造函数2.3：对象的方法3.使用注意点3.1：避免多层嵌套this3.2：避免数组处理方法中的this3.3：避免回调函数中的this...
javascript的this关键字详解
12-01
JavaScript中的`this`关键字是一个非常重要的概念，它用于表示当前执行上下文的对象。根据不同的环境，`this`的指向会有所不同。我们可以将其分为全局环境和函数环境两大类。 ### 全局环境 在全局环境中，`this`...
JavaScript中this关键字使用方法详解
03-17
在JavaScript编程语言中，`this`关键字是一个至关重要的概念，它常常引发初学者的困惑，因为它的值在不同的上下文中可能会有所不同。`this`关键字主要用来引用对象的上下文，或者说是当前执行环境中的对象。在本文中...
javascript 性能优化实战：异步和延迟加载
小伙伴们全都Lucky！
12-11 803
本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。
第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）
2402_87628679的博客
12-11 899
gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。
ESM (ES Modules) 和 CJS (CommonJS)
Irene1991的博客
12-11 633
ESM和CJS是JavaScript的两种模块系统。ESM是ES6引入的现代标准，采用静态编译时加载，支持TreeShaking；CJS是Node.js传统方式，采用动态运行时加载。ESM语法为import/export，CJS为require()/module.exports。新项目推荐ESM，维护旧项目可使用CJS。两者可互相调用：ESM通过createRequire调用CJS，CJS通过动态import()调用ESM。配置时需注意文件扩展名和package.json的type字段声明。ESM代表Jav
第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）
2402_87628679的博客
12-11 1152
对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';
React18+快速入门 - 1.响应式机制之 useState 和 useReducer
weixin_63443072的博客
12-09 464
本文详细介绍了React中两个核心状态管理Hook：useState和useReducer。首先讲解了useState的基础用法，包括三种初始化方式（直接值、函数初始化、对象状态）和四种更新状态的方法（直接设置新值、函数更新、部分更新对象、重置状态），并通过TodoList示例展示复杂状态管理。然后介绍了useReducer的基本概念，适合处理复杂状态逻辑，演示了reducer函数的三种写法（switch语句最常用），通过计数器示例说明如何使用dispatch派发不同action来更新状态。全文通过丰富代码
TypeScript
最新发布
qq_65084229的博客
12-12 167
let y :[number,string] = ['1',2] //不能将类型“string”分配给类型“number”let name:string = `我的名字${name}`enum sex {boy='男', gril='女'}// 返回never的函数必须存在无法达到的终点。// 返回never的函数必须存在无法达到的终点。let name:string ="张三"（只能赋值undefined或null）// 推断的返回值类型为never。
如何在项目里面添加一个可以左右翻动并显示指定日期的日历
MayByUP的博客
12-11 232
在我的健康系统中我有一个经期记录模块，我想写一个日历组件，可以左右翻动，也可以用不同的颜色来显示经期，排卵期，下一次经期以及当天日期，我用到的技术栈是Vue，Node.js,mongoBD数据库，下面我将讲讲我的思路。这个组件比较高级，思路也比较复杂。
高德API精讲系列——vue+高德API搭建前端Echarts图表页面
weixin_66547608的博客
12-10 101
本文介绍了在Vue项目中使用Echarts 5.x开发地理地形图的核心要点：1. 必须准备省市县级别的geo-json文件（推荐从阿里DataV获取）2. 区分注册地图、散点坐标和主题的API使用方式3. 提供了Vue3最小实现示例和常见问题解决方案4. 包含下钻功能实现思路和批量注册脚本5. 强调map名称一致性、文件分离原则和打包注意事项6. 展示了信阳市人口密度图的完整实现代码和效果展示。
PhpStorm 2025.1 PHP 专业开发下载安装中文设置步骤
2501_94447362的博客
12-08 381
PhpStorm 2025 是 JetBrains 推出的PHP 生态旗舰级 IDE，聚焦「现代 PHP 特性深度支持、全栈开发体验升级、AI 辅助编程革新、性能与部署效率优化」四大核心方向，完美适配 PHP 8.0+ 生态、Laravel/Symfony 等主流框架，以及 Vue/React/TypeScript 全栈开发场景。无论是个人开发者快速迭代项目，还是企业团队协作构建大型应用，都能凭借其「智能感知、无缝集成、稳定高效」的特性，大幅降低开发成本，成为 PHP 开发者的首选工具。开发场景。
Vue前端知识
sky学linux的博客
12-08 243
Vue前端知识
Javascript中this关键字指向问题详解与测试
Javascript中this关键字指向问题的测试与详解 概述：本文将详细介绍Javascript中this关键字指向的相关内容，通过四个测试题目，帮助读者更好地理解this关键字的指向问题。 一、this关键字的概念 在Javascript中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值