Js基础27:作用域

JavaScript011

Js基础27:作用域,第1张

函数和变量的有效范围就是作用域

1、作用域的概念

这是因为js中存在作用域的概念。

作用域:

作用域就是指定一个变量或者一个函数的作用范围。

能在页面的任何位置都可以访问,称为 全局作用域

只能在局部(函数内)访问,称为为 局部作用域

上述代码中,a是全局变量,b是局部变量

ES5中只有函数才有作用域,所谓是局部作用域也可以叫函数作用域。

作用域的作用就是为了把数据进行保护,不让外部的数据对我们的数据进行污染

以下①②③④打印什么?

但是结果却大出所料,这里得到的结果是undefined。

③处的结果也和我们最初的认识是不一样的,结果为f对应的函数对象。

造成这个结果是因为变量和函数的作用域提升的原因,什么意思呢?

JS是解释性语言,JS引擎对代码的处理分为两步:

4、作用域链和访问规则

在JavaScript里面,函数内部是可以包含另一个函数的

此时函数b就被函数a包含越来了,这样就形成了两层作用域。

如果有以下代码:三个同名变量放在三个作用域内

会依次输出:10,20,30

虽然多个变量x同名,但是不同作用域内优先使用自己内部作用域的变量x。

如果代码做一下修改:删除函数b的局部变量x

依次输出:10,20,20

函数b内部没有变量b,会向自己的外面的作用域查找x变量,函数a内的x变量离函数b最近,会优先得到函数a的变量x

代码再做修改:再删除a的局部变量x

会依次输出:10,10,10

函数b内部没有x变量,会向函数a的作用域查找,但是函数a内部也没有x变量,会向函数a的上一层作用域再查找,直到查找到了全局作用域。

代码再次变化:全局的变量x也删除

函数b内部没有变量x,会顺着上层作用域一层一层地查找,直到全局作用域也没有,就会报错。

总结:

.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)

静态作用域:函数声明的时候就已经确定作用域。

动态作用域:函数调用的时候确定作用域。

func2 被调用,func2 中的 func 被调用,执行 console.log(),在 func 函数中未找到变量 a,于是去查找外层作用域,由于 js 是静态作用域,func 是在全局作用域中定义的,所以会去全局作用域查找变量,于是打印1。

因为 func 是在 func2 中被定义,当在 func 中未找到变量a,于是去外层 func2 中查找,找到变量a = 2,打印2,执行完成。