普通函数需function关键字且可提升,箭头函数无this/arguments且词法绑定this;对象方法中普通函数this指向调用对象,箭头函数则继承外层作用域this。

普通函数定义和调用要写 function 关键字,且必须有名字或作为表达式
普通函数声明会提升(hoist),所以可以在定义前调用;而函数表达式不行。常见错误是把 const myFn = function() {} 当作声明来提前使用,结果报 ReferenceError: Cannot access 'myFn' before initialization。
调用时注意:普通函数的 this 值由**调用方式**决定——直接调用、方法调用、call/apply、new 都会影响 this 指向。
- 声明形式:
function sayHello(name) { return `Hello, ${name}`; } - 表达式形式:
const sayHi = function(name) { return `Hi, ${name}`; }; - 立即执行:
(function() { console.log('IIFE'); })();
箭头函数没有自己的 this、arguments、super 或 new.target
箭头函数的 this 是词法绑定的,它继承外层第一个普通函数作用域的 this 值。这在事件回调、定时器、对象方法中特别关键——比如在 Vue 或 React 的 class 组件里用 setTimeout(() => this.setState(...)) 能正常工作,但换成 function() { this.setState(...) } 就可能报 undefined is not a function。
它也不能用作构造函数:new (() => {}) 会抛出 TypeError: xxx is not a constructor。
立即学习“Java免费学习笔记(深入)”;
- 基本写法:
const add = (a, b) => a + b;
- 单参数可省括号:
const square = x => x * x;
- 多语句需大括号和
return:const logAndReturn = (x) => { console.log(x); return x; };
普通函数和箭头函数在对象方法里的 this 表现完全不同
这是最容易踩坑的地方。普通函数作为对象方法时,this 指向该对象;箭头函数则完全无视调用位置,只看定义时的外层作用域。
例如:
const obj = {
value: 42,
regular() { return this.value; }, // ✅ 返回 42
arrow: () => this.value // ❌ 返回 undefined(全局 this 或 undefined)
};
如果真想在对象里用箭头函数绑定固定 this,得在外层先捕获:
const self = this;
const obj = {
value: 42,
arrow: () => self.value
};但更推荐直接用普通函数,或用 bind/class fields 语法。
嵌套函数里箭头函数不会创建新作用域,但普通函数会
普通函数有自己的 arguments 对象和独立作用域链;箭头函数没有 arguments,访问 arguments 会向上找外层函数的 arguments,容易引发意料之外的值。
ES6 后建议统一用剩余参数 ...args 替代 arguments,它在两种函数里行为一致。
- 普通函数内嵌普通函数:
function outer() { const x = 1; function inner() { console.log(x); } // ✅ 可访问 x } - 普通函数内嵌箭头函数:
function outer() { const x = 1; const inner = () => console.log(x); // ✅ 同样可访问 x,但 this 不变 } - 但注意:
inner.call({value: 99})对箭头函数无效,this仍是外层的this。
普通函数和箭头函数不是“谁更好”,而是“谁更适合当前场景”。漏掉 this 绑定、误用 arguments、在对象方法里盲目套箭头函数,这三类问题占了实际开发中相关 bug 的八成以上。











