函数和变量的有效范围就是作用域
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,会顺着上层作用域一层一层地查找,直到全局作用域也没有,就会报错。
总结:
函数作用域在函数作用域上这样的结果虽然难发现,但容易理解,var是声明局部变量,js在函数执行之前会把作用域内所有用var声明抽到头部统一生成,就是说
(function(){
alert(document)
var document
})
//等价于
(function(){
var document
alert(document)
})
在执行alert(document)访问document变量时,先从当前作用域寻找这个变量,如果当前作用域没有这个变量,会通过作用域链一层层往上寻找。若没有var document,就会找到上层的window.document。在这里当前作用域声明了document这个变量,优先访问这个变量,因为这个变量只声明未赋值,此时document==undefined。
在函数作用域下是这样的,但全局作用域下就不同了。
对象作用域
先看看raphelguo提供的的例子:
var obj = {a : 1}
with (obj) {
var a = 2
}
alert(obj.a) //2
with (obj) {
a = 5
}
alert(obj.a) //5
可以看到在obj作用域下,var变量声明已经失去了作用,无论有没有用var声明变量,对变量赋值都是等价于对当前obj的属性赋值。换句话说var是用来声明局部变量的,但在对象作用域内并没有地方存储局部变量,所以var是无效的。
再回来看看最初的例子,就很容易理解了,浏览器上在全局作用域下等价于在window这个对象下执行代码:
with(window) {
alert(document)
var document
}
这时var document完全无作用,alert出来的自然是window.document了。
看来,js的变量不是存在函数里,就是存在对象(包括宿主对象如window)里,要区分这两种情况的不同避免遇到坑。