JavaScript 中的 this 关键字:从迷惑到精通

想让我们的代码更优雅吗?this就能帮助你,接下来让我们全方位的了解this的奥妙,看完这篇文章不信你不会!

一、thsi的使用场景

- 在全局中

全局作用域中(非严格模式),this 指向全局对象(浏览器中是 window,Node.js 中是 global

浏览器:

Node.js:

javascript 复制代码
// 在 REPL 或直接运行的脚本中(非模块模式)
console.log(this === global); // true(非严格模式)
this.a = 10; // 相当于 global.a = 10
console.log(global.a); // 10

-在函数作用域中

函数中this的值取决于函数的调用方式(执行上下文)。以下是this在函数中的使用场景

1、当函数被独立调用时,函数的this指向window 其实就是全局。(默认绑定)

js 复制代码
function showThis() 
{
  console.log(this);
}
showThis(); // 输出: Window 对象

2、当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。(隐式绑定) 3.当一个函数被多层对象调用时,函数的this指向最近的一层对象。(隐式丢失)

4.在函数调用时,使用call()、apply()、bind()等方法可以将this"掰弯"到一个对象中。(显示绑定)

简单以call()为例:

js 复制代码
var obj={
      a:1
}
function foo(){
      console.log(this.a)
}
foo.call(obj) //结果为 1

5.在函数调用时,new绑定会使用函数的this指向新创建的实例对象,这是new关键字的底层机制决定的。(new绑定)

6.箭头函数: 箭头函数中没有this这个概念,写在箭头函数中的this就是它外层那个非箭头函数的this。

相关推荐
EndingCoder39 分钟前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
牛十二1 小时前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
yanlele3 小时前
前端面试第 78 期 - 2025.09.07 更新 Nginx 专题面试总结(12 道题)
前端·javascript·面试
影子信息4 小时前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js
徐小夕4 小时前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
wangbing11254 小时前
界面规范8-文字
前端·javascript·html
qczg_wxg4 小时前
高阶组件介绍
开发语言·javascript·react native·ecmascript
小菜全5 小时前
打包 Uniapp
javascript·vue.js·html5
itslife5 小时前
实现 Promise
前端·javascript
一枚前端小能手5 小时前
🔥 老板要的功能Webpack没有?手把手教你写个插件解决
前端·javascript·webpack