js函数作用域和对象作用域里变量的不同

bang 2013-03-03 21:29

写js时碰到一个坑,查了半天简化后问题是这样的:

<script>
  alert(document) //[object HTMLDocument]
  var document
</script>

<script>
  (function(){
    alert(document) //undefined
    var document
  })()
</script>

在全局作用域上document没变,但在函数作用域上执行后document变undefined了。来看看这两种情况下都发生了什么事。

函数作用域

在函数作用域上这样的结果虽然难发现,但容易理解,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)里,要区分这两种情况的不同避免遇到坑。

[返回] [原文链接]