JavaScript 箭头函数和普通函数区别

你是不是平时写代码时，经常分不清什么时候该用普通函数，什么时候该用箭头函数？明明都是用来写函数的，为啥要搞两种？今天咱们就用生活里的例子，把这俩的区别掰得明明白白。

谁绑定了「自己」，谁就是说了算的人

咱们先想个场景：朋友约你去吃火锅，你临时有事，说“我今天去不了了”——这里的“我”，就是你自己。但如果有人帮你传话，说“他今天去不了了”，这个“他”就得看是谁说的，可能是你，也可能是传话的人。

普通函数就像“直接说的你”，它的this就是函数本身的调用者。比如你在浏览器里写console.log(this)，this指向的是浏览器窗口；要是在对象里写普通函数，比如const user = { name: "小明", say: function() { console.log(this.name) } }，调用user.say()时，this就指向user这个对象，输出“小明”。

但箭头函数不一样，它就像“传话的人”，自己根本没有this，得从外层的作用域里拿this。还是刚才的例子，把say改成箭头函数say: () => { console.log(this.name) }，再调用user.say()，就会输出“undefined”——因为箭头函数的this不是user，而是外层的window，window里哪有name呢？

能不能当“工具人”，看有没有`arguments`

你有没有过帮朋友带饭，朋友说“帮我带个手抓饼加蛋加肠”，你得记清楚朋友要的东西，要是换个人带，朋友会重新说需求——这就像arguments，是函数自己收集的所有参数。

普通函数自带arguments对象，里面存着你调用函数时传的所有参数，不管你有没有定义形参。比如写个普通函数function sum() { console.log(arguments[0] + arguments[1]) }，调用sum(2,3)，会输出5，就算没写(a,b)也能拿到参数。

但箭头函数没有自己的arguments，它的arguments得去外层找，要是外层也没有，就会报错。比如你把刚才的sum改成箭头函数const sum = () => { console.log(arguments[0] + arguments[1]) }，再调用sum(2,3)，就会提示“arguments is not defined”——这就像传话的人没把朋友的需求传过来，你自然拿不到要的东西。

关键时刻，谁能当“构造器”

要是你想做个蛋糕，普通的烘焙工具（普通函数），可以用来做不同的蛋糕——比如做个“草莓蛋糕”，就用这个工具加草莓，做“巧克力蛋糕”就加巧克力，甚至可以用工具“复刻”出一个新工具。

普通函数可以当构造函数，用new关键字来创建实例。比如写function Cake(type) { this.type = type }，再写const myCake = new Cake("草莓")，myCake就有了type: "草莓"这个属性。

但箭头函数就不一样了，它是“专用工具”，只能做一种事，不能用来做蛋糕的模子——箭头函数不能当构造函数，用new调用会报错。要是你写const Cake = (type) => { this.type = type }，再写const myCake = new Cake("草莓")，就会提示“Cake is not a constructor”，因为箭头函数根本没有prototype属性，没法创建实例。

一句话总结怎么选

简单来说，要是你需要灵活的this，或者要做构造函数，那就用普通函数；要是你想继承外层的this，写更简洁的回调函数，就用箭头函数。下次写代码前，先想想这个函数的角色，选对就不会踩坑啦。