侧边栏壁纸
博主头像
工作笔记

若批评无自由,则赞美无意义。

  • 累计撰写 190 篇文章
  • 累计创建 206 个标签
  • 累计收到 20 条评论
标签搜索

目 录CONTENT

文章目录

JavaScript中,为什么尽量避免使用 var声明变量?

工作笔记
2022-11-17 / 0 评论 / 0 点赞 / 222 阅读 / 469 字 / 正在检测是否收录...
温馨提示:
🌝 免责声明:本文存在此处完全是为了方便个人工作记录学习,不存在任何商业利益信息。若不小心影响到您的利益,请联系首页博主信息中公开的邮箱,博主将进行删除处理。谢谢合作!

通过 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循环中的变量提升问题。
0

评论区