JS作用域的几个问题求解答

JavaScript020

JS作用域的几个问题求解答,第1张

.ES5中的作用域

for(var i =0i<10i++){

}console.log(i)1234

js这段代码,你觉得会输出什么?答案是10,熟悉java的同学肯定有点诧异,为什么会这样呢?因为js还是不同与java的,在ES5中,只有全局作用域和函数作用域,并没有块作用域,当然我们可以实现块作用域的功能。看下面代码:

(function(){for(var i =0i<10i++){

}})()console.log(i)123456

这种写法叫做立即调用函数表达式(IIFE),不了解自行百度,这其实就创建了一个局部作用域,该作用域声明的变量只有在该块内有效,外部访问不了。这种写法的好处就是可以做到不污染全局变量。

这里还想再提一点,就是在ES5中,变量的声明问题,在ES5中并不是严格,你可以直接采用a=10,来声明一个全局变量。如下:

a=10console.log(a)12

输出10,这里你可以不声明变量就去使用它,其实js帮你做了一件事。它会执行如下代码:

var a=undefineda=10console.log(a)123

你可以试验一下,在函数中也可以做到不用声明变量直接使用,个人觉得这种灵活的做法不是很好。不过在ES6中,已经不推荐不声明变量就去使用的做法了。

那么我们接下来来一点进阶的东西,就是变量提升。(ES5中的概念,ES6中新的用法不会出现变量提升),看代码:

a=10

(function(){console.log(a)var a=1

})()1234567

你猜输出什么?undefined,你答对了吗?迷糊不要紧,我们来看一下什么是变量提升,很简单,其实就是将变量的声明提升到函数的最上面。其实上面的代码最后js在解释的时候会变成这个样子:

var a=undefined

a=10

(function(){var a=undefined

console.log(a)

a=1

})()12345678

理解了变量提升是什么意思了吧,其实就是将声明提到了最前面,所以输出的是undefined

2.ES6中的作用域

由于ES5中存在很多问题,所以在ES6中,用let替换了var的声明,不过为了兼容ES5你还是可以使用以前的var。不过还是建议使用let

let为js添加了新的作用域就是块作用域。看代码:

for(let i=0i<10i++){

}console.log(a)123

输出 a is not defined这里,我们就完全可以使用java等语音,来理解变量的声明了,而且使用let声明的变量,在声明是不可以使用的。

a=3let a =10alert(a)

首先说一下js全局变量的作用域:

在js中如果直接定义一个变量,都是在window这个作用域下定义的

比如

var num = 60

也可以写成这样

window.num = 60

这两个写法是完全一样的,不管哪种写法,使用 console.log(num, window.num) 都可以打印出来 num的值

相对于题主的这个例子:

函数内部声明一个局部变量需要 加 var关键字,如果没有 var,根据向上查找原则,就会去方法 f1 上层去查找 num 变量,如果有,直接拿来用,如果没有就会继续再向上层查找,如果到了 window域 下还没找到,这时 就会在 window域 下创建一个 num变量

所以这个例子打印结果是 60

再说这一个例子

f1 中使用 num变量,在方法形参中 已经有一个 num

实际上,在js加载过程中,编译器在编译过程中已经在 f1 中对 num变量 进行了声明,也就是说 num 已经是 f1 作用域下的一个变量了,所以,在函数内再使用 num的时候,就是在使用 f1作用域下的 num变量,而不会再向上层查找