普通函数用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 是全局或外层,不是 objthis 丢失: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 继承规则或提升行为,很容易在重构或调试时卡住。