在 JS 项目开发中this指向问题几乎是出现频率最高的基础问题之一。同样是一段回调里的取值有人在前面加var that this有人用.bind(this)还有人直接换成箭头函数写出来的代码风格五花八门。最让人头疼的是明明同样的写法换一个场景就报undefined排查半天也找不到原因。其实这些问题的根源都集中在两个点上一是普通函数的this绑定规则没有吃透二是箭头函数与普通函数在this上的差异没有理解到位。这篇文章会把箭头函数和this绑定这两块内容放到一起讲。先解释普通函数this的四种绑定规则再详细拆解箭头函数的语法特性尤其是它“没有自己的 this”这一核心机制。然后通过 6 个实战场景对比箭头函数和普通函数在不同调用方式下的表现最后给出常见问题排查思路和工程建议。无论你是刚接触 JavaScript 的新手还是写过一两年业务代码想系统梳理一遍的开发者这篇文章都能帮你有条理地掌握这块知识。1. this 到底是什么先搞懂普通函数的绑定规则1.1 从一次“找不到值”的报错说起很多同学第一次遇到this问题都是在写事件回调或者定时器时。比如下面这段代码const obj { count: 0, start: function () { setInterval(function () { this.count; }, 1000); } }; obj.start();这段代码的本意是每隔一秒让obj.count加 1但实际运行时this.count并不会生效。原因很简单定时器回调里的this在非严格模式下指向window浏览器环境在严格模式下是undefined它根本不会指向obj。要理解这个问题首先得弄清楚一个结论普通函数的this是在函数被调用时才确定的而不是在函数定义时确定的。也就是说同一个函数用不同方式调用它内部的this可能完全不同。1.2 普通函数 this 的四种绑定规则把各种调用方式归纳一下普通函数的this主要遵循四种规则。绑定规则调用方式this 指向默认绑定直接调用fn()非严格模式指向全局对象严格模式为undefined隐式绑定作为对象方法调用obj.fn()指向该对象obj显式绑定使用call/apply/bind指向传入的第一个参数new 绑定使用new调用new Fn()指向新创建的实例对象下面用最小示例分别演示这四种规则。// 默认绑定 function greet() { console.log(this); // 浏览器非严格模式下输出 window } greet();// 隐式绑定 const person { name: Alice, greet: function () { console.log(this.name); // Alice } }; person.greet();// 显式绑定 function greet() { console.log(this.name); } const person1 { name: Bob }; greet.call(person1); // Bob greet.apply(person1); // Bob const bindGreet greet.bind(person1); bindGreet(); // Bob// new 绑定 function Person(name) { this.name name; } const p new Person(Charlie); console.log(p.name); // Charlie这里要特别留意默认绑定和隐式绑定的区别。把一个对象方法单独取出来再调用会发生隐式绑定丢失const person { name: Alice, greet: function () { console.log(this.name); } }; const fn person.greet; fn(); // 此时 this 不是 person而是 window/undefined输出 undefined1.3 丢失 this 的场景在实际代码中this丢失通常有以下几种典型场景。把方法从对象中拆出来单独调用比如const fn obj.method; fn()。把方法作为回调传给其他函数比如setInterval(obj.method, 100)回调执行时方法已经脱离了对象的调用上下文。嵌套函数内部使用 this比如在setTimeout、setInterval、Promise、事件回调里嵌套了一层普通函数此时内层函数的this和外层函数的this并不是同一个。理解这些问题之后再看箭头函数就非常轻松了。因为箭头函数就是为了解决“回调里 this 丢失”这个问题而提供的常用语法方案。2. 环境准备怎么快速跑起示例代码本文的示例代码不依赖任何第三方框架也不需要搭建复杂环境。你只需要准备以下任意一种运行方式。2.1 浏览器控制台打开 Chrome、Edge 或 Firefox按F12打开开发者工具切到Console面板就可以直接输入并运行 JavaScript 代码。这种方式适合验证window、DOM 事件等浏览器环境特有的行为。2.2 Node.js 环境如果你更习惯在命令行中运行安装 Node.js 即可。建议使用 Node.js 14 或更高版本大部分现代 JavaScript 语法都可以直接运行。node --version新建一个文件比如this-demo.js然后在文件所在目录执行node this-demo.js2.3 验证工具建议学习过程中建议边看边敲。遇到输出不确定的地方不要看一眼就跳过手动运行一遍把输出结果记录下来。尤其是this相关的代码不同运行环境浏览器严格模式、Node.js 模块、Node.js REPL表现出来的行为会有细微差别亲手跑一遍能加深印象。下面所有代码如果没有特别说明都假设运行在非严格模式下Node.js 中直接运行.js文件默认是非严格模式浏览器Console也默认是非严格模式。3. 箭头函数语法与特性详解箭头函数是 ES6 提供的一种简写函数语法写法更简洁同时它和普通函数在this、arguments、构造函数行为上都有明显差异。先看基本语法。3.1 三种基本写法把普通函数改写成箭头函数最简单直接的方式是去掉function关键字在参数和函数体之间加一个。// 普通函数 function add(a, b) { return a b; } // 箭头函数 const add (a, b) { return a b; };其实常见的写法有三种形式// 形式一完整写法适用于函数体有多条语句 const sum (a, b) { const result a b; return result; }; // 形式二函数体只有一行表达式时可以省略 return const sum2 (a, b) a b; // 形式三只有一个参数时可以省略参数括号 const double n n * 2;很多同学会把“省略括号”和“省略 return”这两条规则搞混。这里记一个简单口诀能省略括号的前提是只有一个参数能省略 return 的前提是函数体只有一个表达式。两条规则分别作用在参数区和函数体上互不影响。// 两个参数不能省略括号因为需要区分边界 const wrong a, b a b; // 语法报错 // 函数体不是单个表达式时不能省略 return const calc (a, b) { const sum a b; sum; // 这一行不会作为返回值 }; console.log(calc(1, 2)); // undefined3.2 参数和返回值的简化规则箭头函数的返回值有一个容易被忽略的点当函数体是单个对象字面量表达式时如果直接写成() { name: Alice }会被解析成函数体而不是对象。需要先用括号把对象包起来。// 错误写法大括号被解析成函数体 const getObj () { name: Alice }; console.log(getObj()); // undefined // 正确写法用圆括号包住对象字面量 const getObj () ({ name: Alice }); console.log(getObj()); // { name: Alice }这里稍微解释一下原理。箭头函数的函数体既可以是一段“语句块”也可以是一个“表达式”JavaScript 解析引擎会优先把大括号识别为语句块。所以当你想在单行表达式里返回一个对象时必须用圆括号改变解析优先级。3.3 缺少 arguments、不能 new、没有 prototype除了this之外箭头函数还有三个重要特性。第一个特性没有自己的arguments对象。在普通函数内部arguments是一个类数组对象包含所有传入的参数。而箭头函数内部访问arguments时会向外层作用域继续查找。function outer() { const inner () { console.log(arguments[0]); // 找到的是 outer 的 arguments即 1 }; inner(); } outer(1);如果外层也没有arguments直接访问就会报错const arrow () { console.log(arguments); // ReferenceError: arguments is not defined };第二个特性不能作为构造函数。普通函数可以通过new来创建实例箭头函数不行。因为箭头函数没有自己的this也没有[[Construct]]内部方法所以new一个箭头函数会直接抛出错误。const Person () {}; new Person(); // TypeError: Person is not a constructor第三个特性没有prototype属性。普通函数默认有一个prototype属性用于构造函数场景箭头函数没有这个属性。function normal() {} const arrow () {}; console.log(normal.prototype); // { constructor: ... } console.log(arrow.prototype); // undefined这些特性决定了箭头函数不能承担“构造函数”的角色那它最适合出现的位置就是“作为回调或者内层函数使用”。4. 箭头函数的 this 机制定义时确定调用时不变4.1 箭头函数没有自己的 this这是整个主题里最关键的一句话箭头函数没有自己的 this。它内部使用的this来自函数定义位置的外层作用域。听起来抽象看一个直观的例子const obj { name: Alice, getName: function () { const inner () { console.log(this.name); // 这里的 this 来自 getName 的 this }; inner(); } }; obj.getName(); // Alice因为inner是箭头函数它自己没有this于是向外层找。getName是普通函数作为obj的方法调用时this指向obj所以箭头函数里的this正是obj。这样就实现了“嵌套函数内访问外层 this”的效果。4.2 this 的查找过程箭头函数里使用this时查找过程类似于 JavaScript 作用域链箭头函数内部没有独立的this绑定。沿着作用域链向外查找找到最近的一个非箭头函数作用域。使用这个外层函数当前的this值如果一直找到全局都没有非箭头函数作用域就使用全局对象。所以箭头函数真正保存的是“定义时所处作用域的 this”。这句话换个说法就是箭头函数的 this 是词法上的 this而不是动态的 this。普通函数的 this 是“调用时谁调用了它”箭头函数的 this 是“定义时外层是谁”。4.3 call/apply/bind 为什么改不动普通函数的this可以用call、apply、bind显式修改但箭头函数不行。const obj { name: Alice }; const getName () { return this.name; }; console.log(getName.call(obj)); // undefined console.log(getName.apply(obj)); // undefined const bindGetName getName.bind(obj); console.log(bindGetName()); // undefined这不是语法问题而是箭头函数的this在设计上就不接受修改。call、apply、bind的第一个参数会被忽略其他参数照常传入。const sum (a, b) a b; console.log(sum.call(null, 1, 2)); // 3call 的参数正常传入this 参数无效4.4 箭头函数的 this 真的“固定”了吗很多人会简略记忆为“箭头函数的 this 是固定的”这个说法大致正确但容易导致一个误区以为箭头函数定义之后this就永远指向某一个值。更准确的理解是箭头函数没有自己的 this 绑定每次访问 this 时都实时去外层作用域查询。这个查询的结果通常是稳定不变的因为外层函数的 this 在普通函数调用时已经确定而箭头函数定义在外层函数内部所以在箭头函数创建那一刻它实际得到的 this 来源就已经确定。举个例子外层 this 如果会变化箭头函数的 this 也会跟着变化function outer() { const inner () { console.log(this.name); }; inner(); } const obj1 { name: obj1, outer: outer }; const obj2 { name: obj2, outer: outer }; obj1.outer(); // obj1 obj2.outer(); // obj2两个对象都调用了同一个outer函数。因为outer是普通函数它的 this 由调用者决定所以两次调用中外层函数的 this 不同箭头函数inner分别捕获了各自外层函数的 this因此输出结果也跟着不同。这样理解之后就能解释大多数 this 问题你需要判断的是箭头函数外层的那个普通函数的 this 是什么而不是盯着箭头函数本身看。5. 六大实战场景箭头函数 vs 普通函数下面通过 6 个场景把箭头函数和普通函数在真实业务中的差异完整过一遍。每个场景都给出问题代码和修复代码并附上运行结果说明。5.1 场景一定时器回调问题代码const obj { count: 0, start: function () { setInterval(function () { console.log(this); // window非严格模式 this.count; }, 1000); } }; obj.start();定时器回调中的普通函数this指向全局对象this.count并不是obj.count。修复代码使用箭头函数让回调继承start方法里的 this也就是obj。const obj { count: 0, start: function () { setInterval(() { this.count; console.log(this.count); // 1, 2, 3, ... }, 1000); } }; obj.start();这里的要点是start是普通函数它作为obj的方法调用时this指向obj箭头函数定义在start内部所以箭头函数访问的this就是obj。问题解决的关键不是“箭头函数指向了 obj”而是“箭头函数捕获了外层 start 的 this”。5.2 场景二DOM 事件监听浏览器中给按钮绑定点击事件时普通函数和箭头函数的表现差异非常典型。!DOCTYPE html html body button idbtn点击/button script const btn document.getElementById(btn); btn.addEventListener(click, function () { console.log(this); // 输出按钮元素 button idbtn }); btn.addEventListener(click, () { console.log(this); // 输出 window因为箭头函数没有自己的 this }); /script /body /html普通函数监听事件时this会自动指向绑定事件的元素这是 DOM 事件处理函数的默认行为。箭头函数没有自己的this它捕获的是外层作用域。因此如果你的业务需求是“在回调里操作当前绑定元素”用普通函数更自然如果你的需求是“在回调里访问外层组件或模块的数据”用箭头函数更合适不需要再提前缓存var that this。5.3 场景三对象方法与对象属性很多新手会把箭头函数写在对象方法里然后发现this错了const obj { name: Alice, sayName: () { console.log(this.name); // undefined } }; obj.sayName();为什么这里this不是obj因为sayName是箭头函数它没有自己的 this外层作用域是全局作用域所以this指向全局对象this.name不是obj.name。对于对象方法正确做法是使用普通函数const obj { name: Alice, sayName() { console.log(this.name); // Alice } }; obj.sayName();注意对象里的sayName() {}写法是 ES6 的方法简写等价于sayName: function () {}它仍然是普通函数this 遵循隐式绑定规则。那对象中完全不能用箭头函数吗也不是。如果你只是想定义一个与 this 无关的工具函数比如const utils { double: (n) n * 2 }; console.log(utils.double(10)); // 20这种场景不依赖 this用箭头函数也没有问题。所以判断标准不是“对象里能不能用”而是“这个函数内部是否依赖 this”。5.4 场景四数组高阶函数回调处理数组时map、filter、forEach、reduce这些高阶函数经常需要访问外层对象的字段。来看一个案例const numbers [1, 2, 3]; const obj { factor: 10, results: [], calc: function () { numbers.forEach(function (n) { this.results.push(n * this.factor); }); } }; obj.calc(); console.log(obj.results); // []普通函数回调里的this不是obj所以this.results拿不到最终数组为空。修复方式很简单换成箭头函数让它继承calc的 thisconst numbers [1, 2, 3]; const obj { factor: 10, results: [], calc: function () { numbers.forEach((n) { this.results.push(n * this.factor); }); } }; obj.calc(); console.log(obj.results); // [10, 20, 30]这类场景是箭头函数最典型的应用数组高阶函数的回调不需要自己的 this直接透传外层 this 正好符合需求。5.5 场景五类中的方法在类中this 丢失问题同样常见。先看错误示例class Counter { constructor() { this.count 0; } increase() { this.count; console.log(this.count); } } const counter new Counter(); // 这里直接把方法当作回调传入this 会丢失 setInterval(counter.increase, 1000);setInterval在执行回调时并没有以counter.increase()这种对象方法的形式调用它只是取到了函数本身所以increase内部的this指向全局或 undefined达不到预期效果。多种修复方式都可以// 方式一在外层用箭头函数包一层 setInterval(() { counter.increase(); }, 1000); // 方式二提前 bind setInterval(counter.increase.bind(counter), 1000); // 方式三使用类字段箭头函数 class Counter { constructor() { this.count 0; } increase () { this.count; console.log(this.count); }; }类字段箭头函数是较新的语法需要现代浏览器或 Babel 编译支持。它相当于在构造函数里给实例绑定了一个箭头函数属性因此每个实例都会拥有自己的increase方法this 固定指向实例。这种写法在 React 类组件的事件处理器中非常常见。5.6 场景六Vue / React 项目中的 this 处理在 Vue 2 / Vue 3 Options API 中this指向组件实例所以 methods 里的方法本身应该用普通函数声明而方法内部的回调如果需要访问组件数据则强烈建议使用箭头函数。export default { data() { return { keyword: , list: [] }; }, methods: { fetchList() { // 这里如果用普通函数this 不会指向组件实例 setTimeout(() { // 箭头函数继承 fetchList 的 this即组件实例 this.list [a, b]; }, 1000); } } };反过来如果在 methods 中直接放一个箭头函数export default { methods: { fetchList: () { // 这里的 this 不是组件实例 this.list [a, b]; // 报错或无效 } } };这是因为箭头函数定义时捕获的是组件定义所在模块作用域的 this而不是组件实例。在 React 函数组件中函数组件内部的 this 本身就没什么意义因为函数组件是被独立调用的代码里很少直接使用 this更多场景是使用闭包变量。在 React 类组件中事件处理器推荐使用类字段箭头函数避免每次在 render 里 bind 带来的额外开销问题。这里说的 Vue 和 React 的版本差异较大具体写法应以项目实际框架版本为准但背后 this 绑定原则是一致的。6. 常见问题与排查思路6.1 问题清单问题现象常见原因解决思路对象方法调用后得到undefined方法使用了箭头函数this 不是对象把方法改成普通函数声明call/apply/bind传了 this 参数仍然没生效目标函数是箭头函数箭头函数不接受 this 参数改用普通函数箭头函数内部使用arguments报错箭头函数没有自己的 arguments使用 rest 参数(...args)获取参数new调用箭头函数报错箭头函数不能作为构造函数改为普通函数事件回调里拿不到当前元素回调是箭头函数this 是外层作用域改用普通函数或通过event.currentTarget获取元素定时器回调里访问不到组件/对象数据普通函数回调的 this 指向全局回调改成箭头函数或在外层绑定 this6.2 通用排查四步法遇到 this 指向不符合预期时不要盲目试写法按照下面四步排查。第一步确认出问题的是箭头函数还是普通函数。如果是箭头函数明确它的外层是哪个非箭头函数作用域直接确定 this 来源如果是普通函数进入第二步。第二步看函数是如何被调用的。是直接调用、对象方法调用还是 call/apply/bind、new 调用不同的调用方式对应不同的 this 绑定规则。第三步看是否发生了隐式丢失。函数是否被取出来单独赋值或者作为回调传入其他 API如果发生了隐式丢失就需要用箭头函数或 bind 来保持 this。第四步在关键位置打印确认。在函数开头加console.log(this)对比普通函数和箭头函数的输出差异通常一眼就能看出问题。6.3 两道经典面试题面试题一const obj { name: Alice, getName() { return () this.name; } }; console.log(obj.getName()()); // 输出什么答案是Alice。getName是普通函数作为obj的方法调用时 this 指向 obj内部返回的箭头函数捕获了 getName 的 this所以调用箭头函数时 this 仍然是 obj。面试题二const obj { name: Bob, getName: () this.name }; console.log(obj.getName()); // 输出什么答案是undefined浏览器非严格模式下。因为getName是箭头函数this 来自外层全局作用域而不是 obj。这道题几乎每次都能难倒一部分同学核心就是考察箭头函数在对象字面量中的 this 来源。这两道题建议亲手运行一遍把输出和你自己的预期对比一下能非常直观地检验理解程度。7. 最佳实践与工程建议7.1 箭头函数更合适的场景作为回调函数尤其是数组的map、filter、forEach、reduce以及Promise链、定时器、事件监听中需要访问外层 this 时。函数体简单、不需要 this 和 arguments 的纯函数比如const double n n * 2箭头函数让代码更紧凑。类属性或 React 类组件事件处理器利用类字段箭头函数绑定实例 this。嵌套函数中需要透传外层 this可以替代var that this和.bind(this)的旧写法。7.2 不适合箭头函数的场景对象方法。对象方法通常需要动态 this箭头函数会让 this 错误地指向全局。需要动态 this 的 DOM 事件回调。如果你希望在回调里通过this操作当前绑定元素用普通函数更直接。构造函数。箭头函数不能new也没有 prototype不适合做类。需要访问 arguments 的函数。比如需要处理不确定数量的参数用 rest 参数可以替代但如果团队习惯 arguments需要统一写法。generator 函数和需要动态 this 的原型方法。这些场景都应当使用普通函数。建议记住一条判断标准先问自己“这里的 this 希望指向谁”。如果答案是“外层环境的 this”用箭头函数如果答案是“谁调用我我就指向谁”用普通函数。7.3 团队与项目规范建议在实际项目中this问题不只是个人技术问题还应该成为团队规范的一部分。以下几点建议可以直接落地统一回调风格项目里明确约定所有回调中需要访问外层 this 时一律使用箭头函数不再使用var that this或var self this。对象方法统一写法Vue 组件 methods、普通工具对象的方法默认都写普通函数简写形式method() {}只有内部嵌套回调用箭头函数。代码评审关注 this 场景评审时重点检查三类代码对象方法里是否误用箭头函数、setTimeout/setInterval 回调是否丢失 this、类属性箭头函数是否在必要场景才使用。通过 lint 规则介入ESLint 中可以使用prefer-arrow-callback等规则约束回调写法让规范自动生效减少人工检查遗漏。8. 总结与进阶方向这篇文章围绕箭头函数和this绑定梳理了几个核心结论普通函数的this在调用时确定遵循默认绑定、隐式绑定、显式绑定、new 绑定四种规则箭头函数没有自己的this它在定义时捕获外层非箭头函数作用域的this并且无法被call、apply、bind修改判断箭头函数 this 的关键是找到它外层最近的普通函数是谁。掌握这些之后建议下一步继续学习几个相关主题call、apply、bind的底层实现原理rest参数与arguments的取舍class中super与箭头函数的关系以及原型链中 this 的动态变化。这些都是围绕同一套规则展开的弄懂 this 的内核再去接触 Vue、React 等框架中的响应式系统、事件机制会发现很多框架层面的设计都是在给这些基本规则做包装。写代码时不妨多问自己一句这个函数的 this 来源于“定义位置”还是“调用方式”把这个判断习惯带进日常开发里那些曾经让人头疼的undefined慢慢就不再出现了。如果这篇文章对你有帮助可以收藏备用也欢迎在评论区聊聊你曾经遇到过的 this 坑点。