有这么两段小程序。

var goo = "hello";
function foo(){
  if(true){
    goo = "world";
  }else {
    goo = "world";
  }
}
foo();
console.log(goo);
var goo = "hello";
function foo(){
  if(true){
    goo = "world";
  }else {
    var goo = "world";
  }
}
foo();
console.log(goo);

毫无疑问,把这两段小程序贴到浏览器里跑一下,能很快地得到答案。
所以关上浏览器,你觉得他们的答案分别是什么,为什么?


答案

在第一段小程序中,没有用var去声明变量goo,这在javascript中叫隐式声明,隐式声明是会声明一个全局变量的,所以 goo = "world"; 将会覆盖之前声明的全局变量的值。
所以第一题的答案是world。

而在第二段小程序中,由于在javascript中,var 表达式的值在运行之前将会被转化,JavaScript将会把 var 表达式和 function 声明提升到当前作用域的顶部。也就是说,第二段小程序其实等同于:

var goo = "hello";
function foo(){
  var goo;//var表达式提升到当前作用域的顶部
  if(true){
    goo = "world";
  }else {
    goo = "world";
  }
}
foo();
console.log(goo);

在第二段小程序中,由于条件语句的控制,也许程序永远不会执行到 var goo = "world" 这一句,但是由于使用了var表达式,就会导致goo变量提升到当前作用域的顶部,进而使goo声明为一个局部变量,这样一来,局部变量赋值并不会影响全局变量,所以第二段程序显示“hello”。

两段小程序,考考作用域和变量声明提升(Hoisting),怎么样,答对了么?


隐约雷鸣
631 声望4 粉丝

人声控,吉他控,喵星控。