面试题：JavaScript中函数定义性能优化之基础

Question

在JavaScript中，普通函数定义（function关键字）和箭头函数定义在性能优化方面有哪些主要区别？分别在什么场景下更适合使用以提升性能？

Answer 1

区别

1. this 指向
   • 普通函数：this 指向取决于函数的调用方式。例如，在全局作用域调用，this 指向全局对象（浏览器中是 window）；作为对象方法调用，this 指向该对象；通过 call、apply、bind 调用，this 指向传入的第一个参数。
   • 箭头函数：没有自己的 this，它的 this 继承自外层作用域，且无法通过 call、apply、bind 改变 this 指向。
2. 性能
   • 普通函数：在创建时，会生成一个 arguments 对象来存储传入的参数，这在某些情况下会占用额外的内存。
   • 箭头函数：没有 arguments 对象，若要获取参数，可以使用剩余参数 ...args。从这方面看，箭头函数在内存占用上可能稍优，特别是在不需要 arguments 对象的场景下。另外，箭头函数由于没有自己的 this，不会创建额外的作用域来保存 this，在一定程度上也优化了内存使用。
3. 构造函数
   • 普通函数：可以作为构造函数使用，通过 new 关键字创建实例对象，其内部会自动创建一个新的对象，并将 this 指向该新对象。
   • 箭头函数：不能作为构造函数使用，使用 new 调用箭头函数会抛出错误。

适用场景

1. 普通函数
   • 需要动态改变 this 指向的场景：例如在事件处理函数中，当需要根据不同情况改变函数内部 this 指向时，普通函数更合适。比如在一个对象的方法中，需要根据不同条件调用该方法并改变 this 指向不同的对象。
   • 作为构造函数创建对象的场景：如果要创建自定义的对象类型，需要使用普通函数作为构造函数，来定义对象的属性和方法。
2. 箭头函数
   • 简单的回调函数场景：当传递给其他函数的回调函数不需要自己的 this 且逻辑较为简单时，使用箭头函数可以使代码更简洁，例如在数组的 map、filter、reduce 等方法的回调函数中。例如：const numbers = [1, 2, 3]; const squared = numbers.map(num => num * num);
   • 希望 this 继承自外层作用域的场景：在一些嵌套函数中，若希望内部函数的 this 与外层函数一致，箭头函数能很好地满足需求，避免了在普通函数中通过 self = this 或使用 bind 方法来绑定 this 的繁琐操作。