首先大家看一下下面的代码,判断下会输出什么结果:
var foo = 1;
function bar() {
if(!foo) {
var foo = 10;
}
alert(foo);
}
bar();
答案是10,
你是否会疑惑条件语句if(!foo)并不会被执行呀,为什么foo会被赋值为10.
再来看看第二个例子:
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
答案是10吗?显然不是,alert输出了1。
如果你仍然对上面两个输出摸不着头脑,那么请认真阅读下面这篇文章。
Javascript作用域
Javascript作用域的问题已经是老生常谈了,但是不一定每一个人都能准确理解。
让我们先来看一下Java中的一个例子:
public int result() {
int x = 1;
System.out.println(x); //1
if(true) {
int x = 2;
System.out.println(x); //2
}
System.out.println(x); //1
}
程序一次输出了1、2、1,
为什么第3个输出了1而不是2呢?因为在Java中,我们有块级作用域(block-level scope)。在一个代码块中的变量不会覆盖掉代码块外面的变量。我们不妨试一下在Javascript中的表现:
var x = 1;
console.log(x); //1
if(true) {
var x = 2;
console.log(x); //2
}
console.log(x) //2
结果if代码块中的变量覆盖了全局变量,那是因为Javascript是一种函数级作用域(function-level scope),所以if中并没有独立维护一个scope,变量x影响到了全局变量x。
C/C++/C#和JAVA都是块级作用域语言,那么在Javascript中,我们怎么实现一种块级作用域的效果呢?答案是闭包:
function foo() {
var x = 1;
if(x) {
(function () {
var x = 2;
}());
}
x is still 1.
}
上面代码在if条件块中创建了一个闭包,它是一个立即执行函数,所以相当于我们又创建了一个函数作用域,所以此时内部的x不会对外部产生影响。
Javascript变量提升
在Javascript中,变量进入一个作用域可以通过下面四种方式:
- 语言自定义变量:所有的作用域中都存在this和arguments这两个默认变量
- 函数形参:函数的形参存在于函数作用域中
- 函数声明:function foo() {}
- 变量定义: var foo
其中,在代码运行前,函数声明和变量定义通常会被解释器移动到其所在作用域的最顶部,如何理解这句话呢?
function foo() {
bar();
var x = 1;
}
上面这段代码,被代码解释器编译完后,将变成下面的形式:
function foo() {
var x;
bar();
x = 1;
}
我们注意到,变量x的定义被移动到函数的最顶部,在bar()后,再对其进行赋值。
再来看一个栗子,下面这两段代码其实是等价的:
function foo() {
if(false) {
var x = 1;
}
return;
var y = 1;
}
function foo() {
var x,y;
if(false) {
x = 1;
}
return;
y = 1;
}
所以变量的上升(Hoisting)只是其定义的上升,而变量的赋值并不会上升。
我们都知道,创建一个函数的方法有两种,一种是通过函数声明function foo() {},
另一种是通过定义一个变量 var foo = function() {}
那么这两种在代码执行上有什么区别呢?
来看下面的栗子:
function test() {
foo(); //Type error, foo is not a function
bar(); //will alert 'bar'
var foo = function() {
alert('foo');
}
function bar() {
alert('bar');
}
}
test();
在这个例子中,bar能够正常调用,而foo调用时报错了
我们前面说过变量会上升,所以var foo首先会上升到函数体顶部,然而此时的foo尚未定义,为undefined,所以执行会报错。
而对于函数bar,函数本身也是一种变量,所以也存在变量上升的现象,但是它是上升了整个函数,所以bar()才能够顺利执行。
再回到我们一开始提出的两个例子,能理解其输出原理了嘛
同时这也就是为什么,我们写代码的时候,变量定义总要写在最前面。
ES6的变化
在ES6中,存在let关键字,它所声明的变量存在块级作用域。
而且函数本身的作用域,只存在其所在的块级作用域之内,例如:
function f() {console.log('I'm outside!')}
if(true) {
//重复声明一次函数f
function f() {console.log('I'm inside!')}
}
f();
上面这段代码在ES5中的输出结果为’I’m inside!’,因为f被条件语句中的f上升覆盖了。
而在ES6中的输出是’I’m outside!’,因为块级中定义的函数不会影响到外部。