JS 基础语法与数据操作篇：this、箭头函数与普通函数 | 后台项目里最容易写错的几种场景本文结合后台管理系统真实场景

同学们好，我是 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. 普通函数：自己定义、自己调用
function normalFn() {
  console.log("我是普通函数，直接调用就执行");
}
// 主动调用普通函数
normalFn(); // 输出：我是普通函数，直接调用就执行

// 2. 回调函数：作为参数传递，由其他函数调用
function callbackFn() {
  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：对象方法中的 this
const 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：嵌套函数中的 this
const 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 替代。

// 普通函数：有 arguments
function normalFn() {
  console.log("普通函数 arguments：", arguments); // 输出传入的参数集合
  console.log("第一个参数：", arguments[0]);
}

// 箭头函数：无 arguments，用 ...args 替代
const arrowFn = (...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 }
// 输出：第一个参数： 10

arrowFn(10, 20, 30);
// 输出：箭头函数 args： [ 10, 20, 30 ]
// 输出：第一个参数： 10

解释：

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

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

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

// 普通函数：可作为构造函数
function Person(name) {
  this.name = name;
}
const p1 = new Person("李四");
console.log("普通函数构造的实例：", p1.name); // 李四

// 箭头函数：不能作为构造函数
const ArrowPerson = (name) => {
  this.name = name;
};
try {
  const p2 = new ArrowPerson("王五"); // 强行new会报错
} catch (e) {
  console.log("箭头函数 new 报错：", e.message); // ArrowPerson is not a constructor
}

解释：

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

小结：

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

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

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

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

// ❌ 错误写法：箭头函数里加 this.，会从 window 找方法，导致 this 失效
<el-table-column label="操作">
  <template slot-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)），但这种写法无必要，仅作为兜底参考。

场景 2：Promise / async 里的 this

// ❌ 错误：.then 里用普通函数，this 丢失
handleSubmit() {
  this.validateForm().then(function(res) {
    this.submitForm();  // this 是 undefined！
  });
}

// ✅ 正确：用箭头函数，继承外层的 this
handleSubmit() {
  this.validateForm().then((res) => {
    this.submitForm();  // this 正确指向组件实例
  });
}

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

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

场景 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：事件监听器（addEventListener）

// 场景：监听 window 滚动，组件销毁时需要移除监听

// ❌ 错误：箭头函数每次都是新引用，无法正确 removeEventListener
mounted() {
  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 或普通函数，并把引用存到实例上，保证添加和移除用的是同一个函数。

场景 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);
    });
  }
}