企业官网建设流程全解析

在 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主要遵循四种规则。

下面用最小示例分别演示这四种规则。

// 默认绑定 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，输出 undefined

1.3 丢失 this 的场景

在实际代码中，this丢失通常有以下几种典型场景。

1. 把方法从对象中拆出来单独调用，比如const fn = obj.method; fn()。
2. 把方法作为回调传给其他函数，比如setInterval(obj.method, 100)，回调执行时方法已经脱离了对象的调用上下文。
3. 嵌套函数内部使用 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.js

2.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)); // undefined

3.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 作用域链：

1. 箭头函数内部没有独立的this绑定。
2. 沿着作用域链向外查找，找到最近的一个非箭头函数作用域。
3. 使用这个外层函数当前的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)); // 3，call 的参数正常传入，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 id="btn">点击</button> <script> const btn = document.getElementById('btn'); btn.addEventListener('click', function () { console.log(this); // 输出按钮元素 <button id="btn"> }); 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的 this：

const 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 问题清单

6.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 箭头函数更合适的场景

1. 作为回调函数，尤其是数组的map、filter、forEach、reduce，以及Promise链、定时器、事件监听中需要访问外层 this 时。
2. 函数体简单、不需要 this 和 arguments 的纯函数，比如const double = n => n * 2，箭头函数让代码更紧凑。
3. 类属性或 React 类组件事件处理器，利用类字段箭头函数绑定实例 this。
4. 嵌套函数中需要透传外层 this，可以替代var that = this和.bind(this)的旧写法。

7.2 不适合箭头函数的场景

1. 对象方法。对象方法通常需要动态 this，箭头函数会让 this 错误地指向全局。
2. 需要动态 this 的 DOM 事件回调。如果你希望在回调里通过this操作当前绑定元素，用普通函数更直接。
3. 构造函数。箭头函数不能new，也没有 prototype，不适合做类。
4. 需要访问 arguments 的函数。比如需要处理不确定数量的参数，用 rest 参数可以替代，但如果团队习惯 arguments，需要统一写法。
5. generator 函数和需要动态 this 的原型方法。这些场景都应当使用普通函数。

建议记住一条判断标准：先问自己“这里的 this 希望指向谁”。如果答案是“外层环境的 this”，用箭头函数；如果答案是“谁调用我，我就指向谁”，用普通函数。

7.3 团队与项目规范建议

在实际项目中，this问题不只是个人技术问题，还应该成为团队规范的一部分。以下几点建议可以直接落地：

1. 统一回调风格：项目里明确约定，所有回调中需要访问外层 this 时，一律使用箭头函数，不再使用var that = this或var self = this。
2. 对象方法统一写法：Vue 组件 methods、普通工具对象的方法，默认都写普通函数简写形式method() {}，只有内部嵌套回调用箭头函数。
3. 代码评审关注 this 场景：评审时重点检查三类代码：对象方法里是否误用箭头函数、setTimeout/setInterval 回调是否丢失 this、类属性箭头函数是否在必要场景才使用。
4. 通过 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 坑点。