箭头函数与this绑定：从原理到场景的完整排查指南

箭头函数是 ES6 里最常用的语法之一但它真正解决的其实不是“写法更短”这件事而是 JS 里最折磨人的 this 绑定问题。很多人刚开始只记住了() {}比function() {}少几个字母等到写事件回调、setTimeout、对象方法的时候发现 this 照样飘甚至比原来更让人摸不着头脑。我的判断是箭头函数本身不难难的是你对普通函数的 this 绑定逻辑本来就只记了个大概。所以这篇不准备只讲箭头函数怎么写而是把“普通函数 this 怎么绑定 → 箭头函数改了什么 → 哪些场景该用箭头函数 → 哪些场景别乱用 → 怎么快速排查”完整串一遍。学完之后别人再问你 this你至少能说出“先看是不是箭头函数再看怎么调用”这条主线。适合人群刚学 ES6 有点懵的前端初学者写了好几年代码但一遇到 this 就心慌的开发者还有准备面试需要把 this 优先级讲清楚的人。下面直接按问题拆。1. 普通函数的 this 为什么难它根本不是定义时决定的1.1 this 是在调用那一刻才确定的先记住一个重要结论普通函数非箭头函数的 this不是写代码的时候固定的而是函数被调用的时候根据调用方式临时算出来的。所以同一个函数放在不同地方调用this 可能完全不同。举一个最典型的例子function show() { console.log(this); } const obj { name: obj, show: show, }; show(); // 全局对象严格模式下是 undefined obj.show(); // obj同一个 show 函数直接调用和作为对象方法调用this 不一样。很多人第一次遇到这种结果时很困惑其实就是没有理解“调用方式决定 this”。这里的底层逻辑是this 相当于调用函数时传入的一个隐藏参数这个参数指向谁取决于调用点call-site怎么写。你只需要盯着“它是怎么被调用的”而不是“它在哪里被定义的”。1.2 四种绑定规则按优先级排普通函数的 this 绑定通常拆成四类规则默认绑定函数直接调用比如fn()。非严格模式下 this 指向全局对象浏览器里是 window严格模式下是 undefined。隐式绑定通过对象调用比如obj.fn()。this 指向该对象。显式绑定用call、apply、bind指定 this。new 绑定用new调用函数this 指向新创建的对象。它们的优先级从高到低是new 绑定 显式绑定 隐式绑定 默认绑定。也就是说如果一个函数既能被 new 调用又传了 call还挂在对象上最终生效的是 new 绑定。用表格看一下绑定类型调用方式this 指向优先级默认绑定fn()全局对象 / undefined严格模式最低隐式绑定obj.fn()调用对象 obj中显式绑定fn.call(ctx)/fn.apply(ctx)/fn.bind(ctx)ctx高new 绑定new Fn()新创建的对象最高注意这里的优先级只对普通函数成立。箭头函数不参与这套竞争它永远先按“是不是箭头函数”来判断。这里有一个很容易被忽略的坑隐式绑定丢失。比如const obj { name: obj, show() { console.log(this.name); }, }; const fn obj.show; // 方法被取出来单独存 fn(); // undefined因为这里是默认绑定把方法从对象里取出来再调用等于丢掉了“调用对象”这个上下文。很多回调函数里的 this 丢失本质就是因为这种“方法引用被拆开”的操作。2. 箭头函数到底改了什么this 在定义时就固定了2.1 箭头函数没有自己的 this箭头函数和普通函数最本质的区别不是语法长短而是箭头函数没有自己的 this。它不参与上面任何一种绑定规则。当你访问箭头函数里的 this 时它其实是在往外层作用域里找找到最近的那个普通函数的 this或者全局 this。也就是说箭头函数的 this 是词法作用域lexical scope决定的在代码写出来的时候就已经定死了跟它后面怎么调用没有关系。最直观的例子const obj { name: obj, show() { const arrow () { console.log(this.name); }; arrow(); }, }; obj.show(); // obj这里箭头函数定义在 show 方法内部所以它的 this 就是 show 的 this。而 show 是被 obj 调用的this 指向 obj所以箭头函数里能拿到 obj.name。如果换成普通函数const obj { name: obj, show() { const normal function () { console.log(this.name); }; normal(); // 默认绑定非严格模式下 this 是全局对象取不到 name }, }; obj.show(); // undefined同样是在 show 内部调用普通函数因为默认绑定this 指向全局箭头函数因为继承外层 this仍然指向 obj。这就是箭头函数解决 this 丢失的核心原理。2.2 不止 this箭头函数还少了这些东西箭头函数不是把普通函数的 this 换了一种绑定方式而是整体上变成了一个更轻量的函数形态。它和普通函数的差异包括没有自己的 thisthis 来自外层词法作用域。没有自己的 arguments访问 arguments 会取到外层函数的 arguments。如果需要参数列表用剩余参数rest 参数替代。不能作为构造函数不能用 new 调用否则会直接抛错。没有 prototype 属性。不能用 yield 做生成器函数虽然可以用 async 箭头函数。不能通过 call、apply、bind 改变它的 this。前面几条通常不会踩坑真正容易出问题的是“不能通过 call、apply、bind 改 this”这一条。很多人以为 bind 能救一切结果遇到箭头函数就立刻失效。const arrow () { console.log(this); }; const obj { name: obj }; arrow.call(obj); // 不会指向 obj还是外层 this箭头函数的 this 是在定义时从外层拿的call 传进去的对象会被直接忽略参数倒是能正常传。2.3 为什么说箭头函数“没有自己的 this”“没有自己的 this”这句话很多教程都讲过但解释得不够。我换个方式理解普通函数在调用时会往函数体里塞一个 this 绑定箭头函数在调用时压根不塞所以你在箭头函数里写 thisJavaScript 引擎会沿着作用域链一层层往外找找到最近的那个普通函数作用域或者全局作用域。关键在于“定义的位置”而不是“调用的位置”。所以只要看箭头函数写在哪一层就能判断它的 this 是什么。这也是它最大的好处可预测。3. 哪些场景该用箭头函数异步、回调、数组方法3.1 setTimeout 和事件回调里的 this 丢失最常见的 this 丢失场景是把方法传给异步回调。比如const obj { count: 0, start() { setInterval(function () { this.count; // 这里的 this 是全局对象不是 obj console.log(this.count); }, 1000); }, };普通函数在 setInterval 回调里执行默认绑定 this 为全局对象count 直接变成 NaN 或者报错。以前的标准解法是var self this提前缓存或者用 bind。现在直接写箭头函数const obj { count: 0, start() { setInterval(() { this.count; console.log(this.count); }, 1000); }, };箭头函数定义在 start 方法内部this 继承 start 的 this而 start 被 obj 调用时 this 指向 obj所以回调里的 this 一直是 obj。这是箭头函数最值得用的一类场景。3.2 数组高阶方法map、filter、forEach数组的 map、filter、forEach 这类高阶方法回调里的 this 经常被搞乱。当回调是普通函数时如果没有显式传第二个 thisArg 参数this 就是 undefined严格模式或全局对象。如果用箭头函数this 直接继承外层写起来更直观。const team { member: admin, list: [1, 2, 3], print() { const result this.list.map(function (item) { return ${this.member}-${item}; // this 不对 }); console.log(result); }, };改成箭头函数const team { member: admin, list: [1, 2, 3], print() { const result this.list.map((item) ${this.member}-${item}); console.log(result); }, };map 回调里本来就需要拿到 team 的上下文写箭头函数是最省事的方案。不要一边写 function 回调一边想着怎么把 this 传进去箭头函数已经把这条路打通了。3.3 class 里的方法普通方法和箭头函数字段ES6 的 class 里普通方法默认定义在原型上方法里的 this 取决于调用方式。如果某个方法被当作回调传出去比如事件监听this 就会丢。class Counter { constructor() { this.count 0; } increment() { this.count; console.log(this.count); } } const counter new Counter(); document.getElementById(btn).addEventListener(click, counter.increment); // 点击时 this 指向按钮而不是 counter 实例这里点击按钮后回调里的 this 是当前按钮元素不是 countercount 就会出问题。常见解决方式是counter.increment.bind(counter)或者在构造函数里 bind。如果你用的是支持类字段class field的环境可以直接用箭头函数定义class Counter { constructor() { this.count 0; } increment () { this.count; console.log(this.count); }; }class 字段上的箭头函数this 是在实例创建时从构造函数环境继承的因此不管怎么传回调this 都指向实例。注意这依赖类字段语法如果你的构建目标比较老需要确认 Babel 或 TypeScript 编译是否能正确处理。需要说明的是class 字段箭头函数不是银弹。它会把方法变成实例自身属性每个实例都有一份函数会额外增加内存占用如果某个方法根本不会被当作回调传出去用普通方法也没问题。这里最关键的是“是否需要固定的 this”。4. 这些场景别用箭头函数越用越乱4.1 对象方法里的 this 会变成外层很多新手会把“箭头函数 this 固定”理解为“this 指向自己所在的对象”这是完全错误的。对象方法用箭头函数定义this 并不会指向对象。const obj { name: obj, show: () { console.log(this.name); }, }; obj.show(); // undefined因为 this 是外层不是 obj箭头函数定义时所在的词法作用域是全局作用域所以 this 指向全局对象跟 obj 没有关系。对象的大括号不产生作用域它只是一个普通属性容器。想在对象方法里访问自身属性请用普通函数。注意这里是最容易误用的地方。对象方法想要访问 this.name直接写普通方法。箭头函数只适合“方法内部再嵌套函数”的场景。4.2 构造函数和原型方法不能用箭头函数箭头函数没有自己的 this也没有 prototype所以不能作为构造函数。用 new 调用直接抛错。const Person () {}; const p new Person(); // TypeError: Person is not a constructor原型方法也是一样。挂在原型上的方法如果写成箭头函数内部的 this 来自定义处的作用域多半是全局对象实例调用时完全拿不到实例属性。function Person(name) { this.name name; } Person.prototype.show () { console.log(this.name); // this 是全局拿不到实例的 name };4.3 需要“调用者”作为 this 的场景有些场景本来就需要动态 this。比如 DOM 事件监听里普通函数作为监听器时this 指向触发事件的元素如果写成箭头函数this 变成外层反而要绕一圈去拿e.currentTarget。document.getElementById(btn).addEventListener(click, function () { console.log(this); // 按钮元素 }); document.getElementById(btn).addEventListener(click, (e) { console.log(this); // 外层 this console.log(e.currentTarget); // 想要按钮元素就手动拿 });不是说箭头函数不能用而是你要清楚 this 变了。如果事件处理逻辑依赖 this 指向触发元素直接用普通函数更省事如果依赖外层组件或类的 this就用箭头函数。4.4 需要 arguments 的场景箭头函数没有自己的 arguments。如果你在回调里需要拿到当前函数的参数列表用剩余参数更清晰const sum (...args) args.reduce((a, b) a b, 0); console.log(sum(1, 2, 3)); // 6如果写普通函数并依赖隐藏的 arguments在箭头函数里就会拿到外层函数的 arguments调好久才发现数据不对。建议统一用 rest 参数可读性也更好。5. 遇到 this 问题按这条链路排查5.1 三步判断法以后再看到 this先别猜按顺序做判断。这个函数是不是箭头函数如果是直接看它定义位置的外层 this定义处在外层普通函数或全局作用域里this 就是那个值。如果是普通函数看它是不是用 new 调用是this 指向新对象。不是 new看是不是用 call、apply、bind 调用是this 指向显式传入的对象。都不是看是不是作为对象方法调用比如obj.method()是this 指向 obj。如果只是fn()直接调用this 就是全局对象或 undefined严格模式。下面的优先级直接背下来new 绑定 显式绑定 隐式绑定 默认绑定。箭头函数不参与这套规则永远是特例先判断它。5.2 三个高频题拆解第一个题var name window; const obj { name: obj, say: function () { return () this.name; }, }; const fn obj.say(); console.log(fn()); // objobj.say 是普通函数被 obj 调用this 指向 obj返回的箭头函数定义在 say 内部继承了这个 this所以不管后来怎么调用结果都是 obj。第二个题var name window; const obj { name: obj, say: () () this.name, }; console.log(obj.say()()); // window两层都是箭头函数this 都来自定义时的外层作用域也就是全局作用域所以拿到的是 window.name。第三个题const obj { name: obj, show() { setTimeout(function () { console.log(this.name); }, 0); }, }; obj.show(); // undefined 或报错setTimeout 回调里的普通函数默认绑定 this 为全局对象。如果想让结果输出 obj要么在外面缓存 self要么把回调改成箭头函数要么用 bind。这三个题覆盖了“普通函数 返回箭头函数”“全是箭头函数”“回调里的普通函数”三种典型结构做明白之后大多数 this 题就不再靠猜了。5.3 常见报错和表现实际开发中this 错了通常不会有明显报错而是表现为 undefined、变量取不到、计数器不动等。常见表现有现象大概率原因排查方向点击后方法里的 this 是 undefined 或元素对象回调函数丢失上下文改成箭头函数或在构造函数里 bind对象方法输出 undefined方法写成了箭头函数改成普通方法setInterval 中 count 变成 NaN回调里的 this 是全局对象换成箭头函数或 bind用 new 调用箭头函数报错箭头函数不是构造函数改用普通函数arguments 数据不对箭头函数没有自己的 arguments用 rest 参数排查时先看代码结构箭头函数优先看定义位置普通函数看调用方式。不要一上来就在 console 里打印 this先想清楚这条链路的绑定规则再验证。我一般会在怀疑点同时打印“当前 this”和“外层 this”对比一下就清楚了。5.4 一个实用的小习惯写代码的时候可以给自己定一个简单规则函数体内的 this 如果希望跟着当前上下文走就优先用箭头函数如果希望 this 由调用者决定就用普通函数。凡是把方法取出当回调的场景优先考虑箭头函数或 bind不要赌调用方式一定正确。如果是团队项目建议在代码规范里统一约定对象字面量方法用普通函数回调、异步、数组高阶回调内部需要访问外层 this 时用箭头函数class 方法按是否需要作为独立回调传递来决定是否用类字段箭头函数。这个约定比背一百道题都管用。最后多说一句箭头函数不是用来“替代”普通函数的它只是把 this 从“动态绑定”变成了“词法继承”。你真正要掌握的不是某个语法而是能根据调用场景选择正确的绑定方式。写代码时先问自己一句这里我希望 this 是什么由谁来定答案清楚了箭头函数自然就会用了。