this、箭头函数与普通函数：前端实战避坑指南 | JS 基础语法与数据操作篇

Ne0inhk

24 Mar 2026 — 16 min read

【this/箭头函数/普通函数】+【前端中后台开发】：从【this绑定逻辑】到【落地实操】，彻底搞懂【函数选型】的最佳写法，避开Promise/模板事件/对象方法高频坑！

📑 文章目录

前言
一、一个真实的报错场景
二、基础扫盲：this 到底是谁决定的
三、箭头函数 vs 普通函数：本质区别
四、后台项目里最容易写错的 5 种场景
五、决策清单：什么时候用谁
六、一句话口诀
总结
🔍 系列模块导航

同学们好，我是 Eugene（尤金），一个拥有多年中后台开发经验的前端工程师~

（Eugene 发音很简单，/juːˈdʒiːn/，大家怎么顺口怎么叫就好）

你是否也有过：明明学过很多技术，一到关键时候却讲不出来、甚至写不出来？

你是否也曾怀疑自己，是不是太笨了，明明感觉会，却总差一口气？

就算想沉下心从头梳理，可工作那么忙，回家还要陪伴家人。

一天只有24小时，时间永远不够用，常常感到力不从心。

技术行业，本就是逆水行舟，不进则退。

如果你也有同样的困扰，别慌。

从现在开始，跟着我一起心态归零，利用碎片时间，来一次彻彻底底的基础扫盲。

这一次，我们一起慢慢来，扎扎实实变强。

不搞花里胡哨的理论堆砌，只分享看得懂、用得上的前端干货，

咱们一起稳步积累，真正摆脱“面向搜索引擎写代码”的尴尬。

前言

无论你是刚学 JavaScript 的小白，还是已经写了几年代码的前端，只要在写后台管理系统，大概率都踩过 this 和箭头函数的坑。

这篇文章不讲特别玄学的底层原理，只回答三个问题：

日常写代码该怎么选？（普通函数 vs 箭头函数）
为什么这么选？
坑最容易出在哪里？

⬆ 返回目录

一、一个真实的报错场景

先看一段后台管理系统里常见的代码：

// 表格操作列有个「删除」按钮methods:{handleDelete(id){this.$confirm('确定删除吗？').then(()=>{this.deleteApi(id);// ❌ 报错：Cannot read property 'deleteApi' of undefined});}}

很多人会疑惑：我明明在 methods 里写的，this 怎么会是 undefined？

问题在于：this 不是由「你在哪写的」决定的，而是由「谁在调用这个函数」决定的。 而 $confirm().then() 里的回调，是 Promise 内部在调用，普通函数不会自动带上 Vue 实例的 this。

如果把 .then() 里的回调改成箭头函数，就不会报错了。后面会详细说明原因。

ps·补充回调函数概念(供新手同学参考)

非回调函数：定义后由你直接调用（fn()），执行时机由你决定；
回调函数：把函数作为参数传递给另一个函数，由这个 “接收方函数” 在特定时机（比如异步操作完成、遍历完成）调用它。

// 1. 普通函数：自己定义、自己调用functionnormalFn(){ console.log("我是普通函数，直接调用就执行");}// 主动调用普通函数normalFn();// 输出：我是普通函数，直接调用就执行// 2. 回调函数：作为参数传递，由其他函数调用functioncallbackFn(){ console.log("我是回调函数，由forEach调用");}// forEach是接收回调的主函数，它会遍历数组时调用回调函数[1,2,3].forEach(callbackFn);// 输出3次：我是回调函数，由forEach调用// 更常见的写法：匿名回调函数（简化版）[1,2,3].forEach(function(item){ console.log("遍历到的元素：", item);// 异步/同步场景都常用});// 异步回调（典型场景：定时器）setTimeout(function(){ console.log("1秒后执行的回调函数");// 1秒后才执行，时机由setTimeout决定},1000);

⬆ 返回目录

二、基础扫盲：`this` 到底是谁决定的

核心结论： this 由「调用方式」决定，而不是由「定义位置」决定。

调用方式	this 指向	典型场景
作为对象方法调用	该对象	`obj.fn()` → this 是 obj
直接调用 `fn()`	严格模式：undefined；非严格：window	孤立的函数调用
`new` 调用	新创建的对象	`new Foo()`
`call/apply/bind`	传入的第一个参数	显式指定 this
作为回调传入	谁调就指向谁，通常丢 this	`setTimeout(fn)`、Promise.then(fn)

关键点：当函数被当作回调传给别人时，谁调这个函数，this 就由谁决定。 比如 setTimeout(fn) 里，是浏览器在调 fn，所以 this 通常是 window 或 undefined，而不是你组件里的 this。

⬆ 返回目录

三、箭头函数 vs 普通函数：本质区别

对比项	普通函数	箭头函数
`this`	有属于自己的 `this`，由调用方式决定	没有自己的 `this`，使用外层作用域的 `this`
`arguments`	有	没有（可用 `...args` 替代）
能否 `new`	可以	不可以
能否作为`构造函数`	可以	不可以

⬆ 返回目录

3.1. `this` 的区别（案例说明）

普通函数的 this 由调用方式决定，而箭头函数没有自己的 this，会 “继承” 外层作用域的 this。

// 案例1：对象方法中的 thisconst person ={name:"张三",// 普通函数作为对象方法sayNameNormal:function(){ console.log("普通函数 this：",this.name);// this 指向调用者 person},// 箭头函数作为对象方法sayNameArrow:()=>{ console.log("箭头函数 this：",this.name);// this 指向外层（全局window），没有name属性}}; person.sayNameNormal();// 输出：普通函数 this： 张三 person.sayNameArrow();// 输出：箭头函数 this： undefined// 案例2：嵌套函数中的 thisconst obj ={num:10,fn:function(){// 普通嵌套函数：this 指向全局（非严格模式）setTimeout(function(){ console.log("普通嵌套函数 this.num：",this.num);// undefined},0);// 箭头嵌套函数：this 继承外层 fn 的 this（即obj）setTimeout(()=>{ console.log("箭头嵌套函数 this.num：",this.num);// 10},0);}}; obj.fn();

解释：

普通函数 sayNameNormal 由 person 调用，this 就指向 person；
箭头函数 sayNameArrow 没有自己的 this，直接用外层（全局）的 this，而全局 this（window）没有 name 属性，所以是 undefined；
嵌套场景中，箭头函数能 “捕获” 外层函数的 this，这也是实际开发中箭头函数最常用的场景（避免手动绑定 this）。

⬆ 返回目录

3.2. `arguments` 的区别（案例说明）

普通函数有 arguments 对象（存储传入的所有参数），箭头函数没有，需用剩余参数 ...args 替代。

// 普通函数：有 argumentsfunctionnormalFn(){ console.log("普通函数 arguments：", arguments);// 输出传入的参数集合 console.log("第一个参数：", arguments[0]);}// 箭头函数：无 arguments，用 ...args 替代constarrowFn=(...args)=>{// console.log(arguments); // 直接用会报错：ReferenceError: arguments is not defined console.log("箭头函数 args：", args);// 数组形式存储参数 console.log("第一个参数：", args[0]);};normalFn(10,20,30);// 输出：普通函数 arguments： [Arguments] { '0': 10, '1': 20, '2': 30 }// 输出：第一个参数： 10arrowFn(10,20,30);// 输出：箭头函数 args： [ 10, 20, 30 ]// 输出：第一个参数： 10

解释：

arguments 是类数组对象，只能在普通函数中使用；
箭头函数要获取所有参数，必须用 ES6 的剩余参数 ...args，args 是真正的数组，还能使用 map/filter 等数组方法，比 arguments 更灵活。

⬆ 返回目录

3.3. 能否 `new` / 作为`构造函数`（案例说明）

普通函数可以用 new 调用（作为构造函数），箭头函数不行，强行 new 会报错。

// 普通函数：可作为构造函数functionPerson(name){this.name = name;}const p1 =newPerson("李四"); console.log("普通函数构造的实例：", p1.name);// 李四// 箭头函数：不能作为构造函数constArrowPerson=(name)=>{this.name = name;};try{const p2 =newArrowPerson("王五");// 强行new会报错}catch(e){ console.log("箭头函数 new 报错：", e.message);// ArrowPerson is not a constructor}

解释：

构造函数的核心是 new 操作会创建新对象，并把函数的 this 绑定到这个新对象；
箭头函数没有自己的 this，也没有 prototype 属性（构造函数的必要条件），所以无法作为构造函数使用。

小结：

this 指向：普通函数的 this 由调用方式决定，箭头函数继承外层作用域的 this（无自身 this）；
参数获取：普通函数用 arguments，箭头函数无 arguments，需用 ...args 剩余参数；
构造函数能力：普通函数可 new 作为构造函数，箭头函数不行，强行 new 会报错。

这三个区别是箭头函数和普通函数最核心的差异，其中 this 指向的区别是实际开发中最常遇到、也最需要注意的点。

⬆ 返回目录

四、后台项目里最容易写错的 5 种场景

4.1 场景 1：Element UI / Ant Design 表格里的回调

 // ❌ 错误写法：箭头函数里加 this.，会从 window 找方法，导致 this 失效 <el-table-columnlabel="操作"><templateslot-scope="scope"><el-button@click="() => this.handleEdit(scope.row)">编辑</el-button></template></el-table-column> // ✅ 最优写法：直接传方法引用，Vue 自动绑定组件实例的 this <el-button@click="handleEdit(scope.row)">编辑</el-button> // ⚠️ 能运行但不推荐：箭头函数里不加 this.（Vue 会映射到组件方法），但多一层包装无意义 <el-button@click="(row) => handleEdit(row)">编辑</el-button>

原因：

模板中的事件绑定，Vue 会自动将方法的 this 绑定到组件实例上（而非 window）。

错误写法：箭头函数的 this 固定指向全局上下文（window/undefined），this.handleEdit 会从 window 查找方法（找不到），且方法内部的 this 也会失效；

直接写方法名：Vue 会把模板里的 handleEdit 隐式映射到「组件实例的 methods」，并自动绑定组件的 this，是最安全高效的方式。

结论： 模板事件绑定优先直接写方法名(参数)（最优解）；尽量不要用箭头函数包装（避免多余的函数创建 + 踩 this 坑）；若因特殊场景非要用箭头函数，需去掉 this.（如 (row) => handleEdit(row)），但这种写法无必要，仅作为兜底参考。

⬆ 返回目录

4.2 场景 2：Promise / async 里的 this

// ❌ 错误：.then 里用普通函数，this 丢失handleSubmit(){this.validateForm().then(function(res){this.submitForm();// this 是 undefined！});}// ✅ 正确：用箭头函数，继承外层的 thishandleSubmit(){this.validateForm().then((res)=>{this.submitForm();// this 正确指向组件实例});}

原因：.then() 的回调是 Promise 内部调用的，普通函数不会自动绑定组件 this。用箭头函数可以继承 handleSubmit 所在作用域的 this，即组件实例。

结论： 在 Promise、async/await、setTimeout 等异步回调里，需要访问组件/外层 this 时，用箭头函数。

⬆ 返回目录

4.3 场景 3：对象方法 / API 封装

// ❌ 错误：箭头函数作为对象方法，this 指向外层（window）const api ={baseUrl:'/api',getList:()=>{return axios.get(this.baseUrl +'/list');// this.baseUrl 是 undefined！}};// ✅ 正确：用普通函数const api ={baseUrl:'/api',getList(){return axios.get(this.baseUrl +'/list');}};

原因： 箭头函数没有自己的 this，会去外层找。这里的 getList 定义在对象字面量里，外层是全局，this 就是 window（或 undefined），自然拿不到 baseUrl。

结论： 对象方法、Class 方法需要用到 this 时，用普通函数，不要用箭头函数。

⬆ 返回目录

4.4 场景 4：事件监听器（addEventListener）

// 场景：监听 window 滚动，组件销毁时需要移除监听// ❌ 错误：箭头函数每次都是新引用，无法正确 removeEventListenermounted(){ window.addEventListener('scroll',()=>this.handleScroll());},beforeDestroy(){ window.removeEventListener('scroll',()=>this.handleScroll());// 移除失败！引用不同}// ✅ 正确：保存同一个函数引用mounted(){this.boundHandleScroll =this.handleScroll.bind(this); window.addEventListener('scroll',this.boundHandleScroll);},beforeDestroy(){ window.removeEventListener('scroll',this.boundHandleScroll);}

原因：removeEventListener 必须传入和 addEventListener 时完全相同的函数引用。每次写 () => this.handleScroll() 都会生成新函数，所以无法正确移除。

结论： 需要手动移除监听时，用 bind 或普通函数，并把引用存到实例上，保证添加和移除用的是同一个函数。

⬆ 返回目录

4.5 场景 5：数组方法的回调（`forEach`、`map`、`filter` 等）

// 在 Vue 组件里methods:{processList(){const list =[1,2,3];// ❌ 错误：普通函数作为 forEach 回调，this 会丢 list.forEach(function(item){this.doSomething(item);// this 是 undefined});// ✅ 正确：箭头函数继承外层的 this list.forEach((item)=>{this.doSomething(item);});}}

原因：forEach 等方法的回调是由数组方法内部调用的，普通函数不会绑定组件 this。用箭头函数可以继承 processList 的 this。

结论： 在 forEach、map、filter、reduce 等回调里需要访问外层 this 时，用箭头函数；不需要 this 时，两者都可以。

⬆ 返回目录