New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于JavaScript的变量提升 #86

Open
Wscats opened this Issue Mar 29, 2017 · 0 comments

Comments

Projects
None yet
1 participant
@Wscats
Owner

Wscats commented Mar 29, 2017

var v='Hello World'; 
alert(v); 

弹出“Hello World”

var v='Hello World'; 
(function(){ 
alert(v); 
})() 

也是弹出了“Hello World”

var v='Hello World'; 
(function(){ 
alert(v); 
var v='I love you'; 
})() 

弹出了“undefined”
这里面隐藏了一个陷阱,就是JavaScript中的变量提升
它相当于

var v='Hello World'; 
(function(){ 
var v;
alert(v); 
v='I love you'; 
})() 

变量提升,简单的理解,就是把变量提升提到函数的最顶的地方。需要说明的是,变量提升只是提升变量的声明,并不会把赋值也提升上来,没赋值的变量初始值是undefined。所以上面就出现了声明为undefined的var,因为赋值在后面声明提升在了前面。

function foo() {  
    if (false) {  
        var x = 1;  
    }  
    return;  
    var y = 1;  
}  
function foo() {  
    var x, y;  
    if (false) {  
        x = 1;  
    }  
    return;  
    y = 1;  
}  

还有一点注意的是因为JavaScript是函数级作用域,只有函数才会创建新的作用域,而不像其他语言有块级作用域,例如:块,就像if语句,在上面例子中,不管会不会进入 if代码块,函数声明都会提升到当前作用域的顶部,得到执行,在js中并不会创建一个新的作用域(在C语言等语言中却是一个新的作用域,上面这个例子,两个函数实际上是一样的)。
从这里我们应该体会到,当我们在写js code的时候,我么需要把变量放在块级作用域的顶端,不然容易发生一些意想不到的错误。
注意:ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

还有一种就是函数提升

function myTest(){ 
    foo(); 
    function foo(){ 
         alert("Hello World"); 
    } 
} 
myTest(); 

弹出“Hello World”
这里函数提升成功

function myTest(){ 
    foo(); 
    var foo =function foo(){ 
          alert("我来自 foo"); 
    } 
} 
myTest(); 

报错:foo不是函数
函数提升失败

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment