让人头疼的面试题-函数

让大部分人头疼的面试题也是错误率较高的面试提之“函数”

前言：

在面试中往往难倒你的可能不是一个算法难题，也不是关于Vue或React中的某个优化机制或生命周期？NONONO，它可能是一个JS的运行时行为，直接或间接的影响着实际项目中的性能表现或内存使用。

问题：

问在下方的代码中那种方法实现方式性能更好，为什么？

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <button id="button">Click</button>
</body>
</html>

<script type="application/javascript">
  const btn = document.getElementById("button");
  const items = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
  
  // 方法 - A
  btn.addEventListener('click', () => {
    items.forEach(item => {
      console.log(item)
    })
  })
  
  // 方法 - B
  btn.addEventListener('click', function () {
    items.forEach(function (item) {
      console.log(item)
    })
  })
</script>

大部分人可能会选择A，问为什么，理由通常大概是现代的编码习惯更简洁的语法，有的会进一步说明是现代游览器中JS对箭头函数做出了优化。

当然上述都是错误的，正确的是方法B。

原因分析：

问题不在语法简洁否而在于内存管理上，在方法A中，每次点击都会创建一个新的箭头函数，这是因为箭头函数会捕捉词法作用域的this，它们无法被removeEventListener正确移除。

词法作用域：

词法作用域（Lexical Scope）是指变量的作用域是由代码在编写时的位置决定的，而不是由代码执行时的调用堆栈来决定的。也就是说，JavaScript 在执行代码时，根据函数的嵌套结构来决定哪些变量是可访问的。