JavaScript中，为什么尽量避免使用 var声明变量？

通过 var 关键字来定义 JavaScript 变量，这个大家都能理解：

var num = 10

下面我们来讨论一个为什么尽量避免使用 var。
快速的猜一下下面的代码会返回什么：

for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i)
  }, 100 * i)
}

相信很多人都踩过这个坑，这几乎是作用域的必考题目，但如果你不了解，不要担心，你并不是一个人。大多数人期望输出的结果是这样的：

0
1
2
3
4
5
6
7
8
9

然而，实际结果是这样的：

10
10
10
10
10
10
10
10
10
10

解释：这里的 i 是在全局作用域中的，只存在一个值。 setTimeout 这个异步函数在若干毫秒后执行，并且它是在 for 循环结束后的。在 for 循环结束后， i 的值为 10，所以当函数被调用的时候，它会打印出 10。

下面介绍几种可以实现我们预期输出结果的方法：

1、通过调用函数，创建函数作用域：

for (var i = 0; i < 10; i++) {
  f(i)
}

function f (i) {
  setTimeout(function () {
    console.log(i)
  }, 100)
}

立即执行函数，创建函数作用域：

for (var i = 0; i < 10; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(i)
    }, 100 * i)
  })(i)
}

通过 let 关键字创建块级作用域：

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i)
  }, 100 * i)
}

总结：

1. var创建的变量是挂载在window顶级对象上面的，全局变量比较多的情况下通通都会挂载到window顶级对象上面，如果跟之前定义的对象重复则会改变之前定义的值，变量造成污染。
2. var在for循环中的变量提升问题。