JavaScript 中的变量作用域问题

备注：这里的内容有转载的部分，有我自己理解的部分。

 

首先来一道题：

function foo(){ 
  foo.abc = function(){alert('def')} 
  this.abc = function(){alert('xyz')} 
  abc = function(){alert('@@@@@')}; 
  var abc = function(){alert('$$$$$$')} 
} 
foo.prototype.abc = function(){alert('456');} 
foo.abc = function(){alert('123');} 
var f = new foo(); 
f.abc(); 
foo.abc(); 
abc(); 

 

都是abc，看懵了吧？

慢慢来理解吧。

var a=100;   
var b=true;   
function test(){   
    alert(a);   //undefined
    alert(b);   //true
    b=false;   
    alert(b);   //false
    var a=200;   
    alert(a/2);   //100
    alert(++Math.PI);    //4.14...
    alert(Math.PI++);   //3.14...
}   
test(); 

 这里为什么会输出undefined呢？

 

像javascript这样的解释型语言，基本分为两个阶段，编译期（下面为符合大多数语言的称呼习惯，改叫预编译）与运行期。

在预编译阶段，它是用函数来划分作用域，然后逐层为其以 var 声明的变量（下略称为var变量）与函数定义开辟内存空间，再然后对var变量进行特殊处理，统统赋初始值为undefined。

 

我们都明白局部变量的优先级大于全局变量，或者说内围作用域的变量的优先级比外围的高。

当JS引擎在当前作用域找不到此变量时，它就往外围的作用域找。

不过，在这之前，有一个严肃的问题是，究竟当前作用域存不存在这个变量。

 

第1行——它为外围作用域的a赋值为100
第2行——它为外围作用域的b赋值为true
第3行——进行test的作用域，我们简称为内围作用域。
第4行——就立即调用内围作用域的a，这时它还没有来得及赋值呢！
              不过它已经声明过了，因此默认为其赋值为undefined（在预编译阶段，见图），
              于是alert为undefined
第5行——就调用b时，JS引擎就拿起我画的图看了（笑），
              发现test的作用域内没有b，眼睛往外望，发现b了，
              而b在第二行就赋值为true，于是alert为true。
第6行——为一个赋值操作，把外围的b变量改赋为false。
第7行——alert为false。以下说法不说了。

 

那么，如果我把var a = 200;注释掉会怎样呢？

是的，那么JS引擎则在预编译阶段则找不到作用域里面的a，转而直接使用Global变量。

 

好的，那么复习一下：

var scope = "global";   
function f() {   
    alert(scope);               
    var scope = "local";        
    alert(scope);               
}   
f(); 

你做对了吗？

 

第一个是 undefined

第二个是 local

 

那么再来看这个、

Object.test = "bbb"; 
Object.prototype.test = 'ccc'; 
window.test = "aaa"; 
(function f() { 
    alert(test); 
})(); 

 

或许很多人会猜是bbb

但实际上呢，是aaa。

 

JS引擎为了速度优化，所以在所有没有声明的变量前面自动加上window.

其中的window.test 其实等同于 var test = "aaa";

 

另外像Object.test = “XXX”这样定义，为类属性，或称静态属性。类属性优先级都是比实例属性低的

关于prototype的使用机制在后面会给出。

 

再回过头来看最前面的题目：

第一个为xyz,
f.abc很明显就是调用其实例属性，通常构造函数是这样定义实例方法与实例属性的：
this.XXX = "XXXXXXXX"

（实例属性 优先级比 类属性 高）

 

第二个就是构造函数内部的foo.abc还是外部的foo.abc的问题了。
我们只要搞清楚一点就可以，写在外面的那个(foo.abc=function(){alert('123');})是"极晚绑定"的成员，
优先级极低，覆盖不了内部的同名成员。

 

第三个为什么会报错呢？！
因为在预编译阶段，
foo()的作用域就有了一个abc变量，
因此abc = function(){alert('@@@@@')}
就变不了window.abc = function(){alert('@@@@@')}，
而下面那一行就更甭提了。

而我们调用的是abc,全局变量的abc,
浏览器会自动给它加上window.abc，就算不加上，
沿途的Objcet也没有abc这个变量，
因此它在f()的作用域外找不到abc，就报未定义错误！

 

内容参考自：http://blog.csdn.net/kingwolfofsky/article/details/6581944

http://www.cnblogs.com/rubylouvre/archive/2009/08/21/1551270.html