JavaScript函数与箭头函数对比解析

JavaScript中普通函数与箭头函数虽表面相似，实则在this绑定、arguments访问、提升行为、构造函数能力及执行上下文继承等核心机制上存在本质差异：普通函数拥有独立的this和arguments，支持提升并可作为构造函数；箭头函数则完全不绑定this和arguments，而是静态继承外层作用域，不可提升、不可实例化，特别适合回调场景避免this丢失——但滥用（如addEventListener中直接传箭头函数）反而引发难以排查的bug。选择关键不在代码简洁，而在于精准匹配执行上下文需求，理解这些底层差异，才能写出健壮、可维护的现代JavaScript代码。

普通函数用 function 关键字定义，有独立 this 和 arguments

普通函数是 JavaScript 最基础的函数形式，必须用 function 关键字声明，可以具名或匿名。它会创建自己的 this 绑定（取决于调用方式），也自带 arguments 类数组对象。

• 具名函数：

  function sayHello(name) { return `Hello, ${name}`; }

• 匿名函数赋值：

  const greet = function(name) { return `Hi, ${name}`; };

• 作为方法时，this 指向调用它的对象：

  const obj = { name: 'Alice', getName() { return this.name; } }; obj.getName(); // 'Alice'

• 在事件回调或 setTimeout 中容易丢失 this：

  obj.handleClick = function() { console.log(this.name); }; button.addEventListener('click', obj.handleClick); // 点击时 this 是 button，不是 obj

箭头函数用 => 定义，不绑定 this 和 arguments

箭头函数是 ES6 引入的简写语法，没有自己的 this、arguments、super 或 new.target，全部继承自外层作用域。它不能用作构造函数，也不能使用 yield。

• 基本写法：

  const add = (a, b) => a + b;

• 单参数可省括号：

  const square = x => x * x;

• 函数体多行需用大括号和 return：

  const logAndReturn = (x) => { console.log(x); return x; };

• 在对象方法中要小心：

  const obj = { name: 'Bob', getName: () => this.name }; obj.getName(); // undefined，因为箭头函数的 this 是全局或外层，不是 obj

• 适合用在回调中避免 this 丢失：

  const obj = { value: 42, run() { setTimeout(() => console.log(this.value), 100); } }; obj.run(); // 42，箭头函数捕获了外层 run 的 this

普通函数能被提升，箭头函数不能

函数声明（function foo() {}）会被提升到作用域顶部，可在定义前调用；而箭头函数本质是赋值表达式，只能在声明之后使用。

• 这个能运行：

  console.log(foo()); // 'ok' function foo() { return 'ok'; }

• 这个会报错：

  console.log(bar()); // TypeError: bar is not a function const bar = () => 'ok';

• 同理，var 声明的函数表达式也会被提升但值为 undefined，不如直接避免混用

该选哪个？看场景，不是看简洁度

别因为箭头函数写起来短就默认用它。关键看是否需要动态 this、是否要作为构造函数、是否在需要 arguments 的老式逻辑里。

• 用普通函数：Object.prototype 方法、Vue/React 的选项式组件中的 methods、需要 new 实例化的类、需要访问 arguments 的兼容写法
• 用箭头函数：map/filter 回调、setTimeout/Promise 链内、React 函数组件内的事件处理（避免重复绑定）、封装工具函数（无状态）
• 特别注意：addEventListener 传箭头函数会导致无法移除监听器 —— 因为每次都是新函数：

  btn.addEventListener('click', () => doSomething()); // ❌ 无法 removeEventListener btn.removeEventListener('click', () => doSomething()); // 不是同一个函数引用

普通函数和箭头函数的差异不在语法糖层面，而在执行上下文模型。漏掉 this 继承规则或提升行为，很容易在重构或调试时卡住。

今天关于《JavaScript函数与箭头函数对比解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！