JavaScript函数定义与箭头函数对比

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript函数定义及箭头函数与普通函数区别》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

普通函数用function关键字定义，有独立this和arguments；箭头函数用=>定义，不绑定this和arguments，继承外层作用域，不可提升、不可作为构造函数。

普通函数用 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学习网公众号，给大家分享更多文章知识！