Javascript中的var和let

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript中的var和let相关的知识,希望对你有一定的参考价值。

引子

我们先来看一个常见的例子,

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

输出的结果并不是我们预期的 0-9,而是输出了十个 10。而当我们把其中的 var 改成 let ,结果就成了 0-9。

原因

var 使用的是函数作用域,即 for 循环中的 var i 实际上在整个 func 函数中都有效。而 setTimeout 中的匿名函数(十个)都由于闭包的原因能够访问到同一个 i,因为他们是延迟执行的,所以等到 console.log(i) 被执行的时候, i 已经是 10 了。

在以前我们面对这种情况常用的方法是通过另外一个函数来将 i 装进自己的函数作用域中:

function helper(i){  
    setTimeout(function(){
        console.log(i)
    },1000)
}
function func(){  
  for (var  i = 0; i < 10; i++) {
      helper(i)
  }
}
func()

这样虽然 setTimeout 中的匿名函数仍然是延时调用的,但是 helper 是即时调用的( helper(0), helper(1), ... ),且其参数 i 是其函数作用域持有的(而非 func持有),这样每个匿名函数通过闭包访问到的 i 都是独立的,所以能够得到 0-9 。

为什么 let 不同

let 是 ES6 引入的新特性,和 var 最大的不同在于,它是块级作用域的,所以相当于 for 的每次循环的 i 都是独立的,它们在语句块(所在的循环体)结束时就失效了(当然由于闭包的原因仍然能被 setTimeout 的匿名函数访问),匿名函数分别持有每个作用域的 i 而不是同一个。

具体的差别

上面虽然给了解释,但是仍然会有些模糊的感觉。下面来明确一下块级作用域和函数作用域的行为到底有什么不同:

不同的作用域范围

顾名思义,函数作用域在所在的函数都有用,而块级作用域则只在自己所在的代码块有用,举个例子:

function func(){  
    if(true){
        var iAmVar = ‘var‘
        let iAmLet  = ‘let‘
    }
    console.log(iAmVar)  // ‘var‘
    console.log(iAmLet)  // 访问不到
}
func()

变量提升的不同行为

var 和 let 的变量提升行为也不同,首先了解什么叫变量提升,即

var k = ‘test‘  
function func(){  
  console.log(k)  // undefined
    var k = ‘in‘
}
func()

即函数中的所有 var 的函数声明都会被提前到函数的头部,对于 var 来说,上面的代码相当于

var k = ‘test‘  
function func(){  
  var k
  console.log(k)  // undefined
    k = ‘in‘
}
func()

而 let 的表现更为严格,同样的,let 的声明也会被提前,但是如果在这种情况下试图访问尚未初始化的 k ,会抛出一个 ReferenceError 。我们称这种特性为\”临时死区\”,这样能够避免一些奇奇怪怪的失误。

另外,由于作用域的原因, let 的声明提前在代码块中就能生效。

验证上面的想法

所以,如何验证 for 循环每次执行时的 i 都不是同一个呢,也非常简单,我们把i 的声明放到 for 的外面:

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

再次得到了 10 个 10,和用 var 时一样(因为作用域都是 func 函数内)。

总结

let 的行为显得比 var 更加符合预期,规则也更为严格,所以我们应该尽可能的使用 let 和 const 来替代 var ,这样代码就不会出现开头那种奇怪的行为。

以上是关于Javascript中的var和let的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中的 let 和 var

jacript var let const 区别

Javascript中的var和let

bala001 浏览器中的JavaScript执行机制:09 | 块级作用域:var缺陷以及为什么要引入let和const?

Javascript var 和 let 的区别

小程序里let和var以及const区别