首页 > > 网页制作 > Javascript >

JS 函数作用域及变量提升那些事！

2018-06-27 09:08:24来源：未知阅读 ()

虽然看了多次js函数作用域及变量提升的理论知识，但也是一知半解~

这几天做了几道js小题，对这部分进行了从新的理解，还是有所收获的~

主要参考书籍：

《你不知道的JavaScript（上卷）》第一部分

《JavaScript高级程序设计》第四章 4.2 执行环境与作用域

理解要点：

1. js其实是一门编译语言，代码的执行分为两个阶段：（《你不知道的JavaScript（上卷）》）

a.编译阶段

b.执行阶段

2. 作用域嵌套：

在当前作用域中无法找到某个变量时，引擎就会在外层嵌套中继续查找，直到找到该变量，或是抵达最外层作用域为止。（《你不知道的JavaScript（上卷）》）

3. 包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。变量及函数声明的提升也是在这个阶段。

注意：（1）变量及函数声明的提升只是提升“声明”，并不会提升“赋值”，赋值是在函数执行阶段完成的。

　　　（2）函数表达式不能被提升。

4. 声明变量：使用var声明的变量会自动被添加到最近的环境中。没有使用var声明，该变量会自动被添加到全局变量中。（《JavaScript高级程序设计》）

注意：这里的没有使用var声明指的是从当前作用域向上延伸搜索，直到在全局作用域中都没有找到该变量的声明，此时该变量才会自动被添加到全局变量中。（参考上面理解要点“2”）

好啦，以下抛出题目，可以先试着做一下，你的答案是什么 ^_^

一.

1 var foo = 1;
2 function bar( ) {
3     foo=10;
4     return function foo() { };
5 }
6 bar( );
7 console.log(foo);

二.

1 var foo = 1;
2 function bar() {
3     foo = 10;            
4     return;
5     function foo() {};
6 }
7 bar();
8 console.log(foo);

三.

1 var a = 1;
2 function fn() {
3     console.log(a);
4     var a = 2;
5 }
6 fn();
7 console.log(a);

四.

1 var a = 1;
2 function fn(a) {
3     console.log(a);
4     var a = 2;
5 }
6 fn(a);
7 console.log(a);

华丽丽的分割线———————————————————————————————————————————

哈哈，是不是so easy，以下是自己的理解，如果有误，还望大神指出^_^

一.

1 var foo = 1;
2 function bar( ) {
3     foo=10;
4     return function foo() { };
5 }
6 bar( );
7 console.log(foo);

理解要点：

1. 在bar（）函数作用域中，foo 变量并没有使用 var 进行声明，所以在执行 foo = 1；语句时，引擎会沿着作用域链向上查找，结果在全局作用域中找到了 var foo；此时全局作用域中的 foo 的值为 1；执行了 bar（）函数中的 foo = 10；后，最终全局作用域中的变量 foo 的值为 10；

2. return function foo(){}; 在此处是一个函数表达式，而不是函数声明，所以不存在函数声明的提升。

所以：

1 var foo = 1;
2 function bar( ) {
3     foo=10;
4     return function foo() { };
5 }
6 bar( );
7 console.log(foo);//10

以下抛出题一的变形和答案，可以自行理解喔 ^_^

1 function bar( ) {
2      foo=10;
3      return function foo() { };
4 }
5 bar( );
6 console.log(bar());//? foo() { }
7 console.log(foo);//10

1 function bar( ) {
2      var foo=10;
3      return function foo() { };
4 }
5 bar( );
6 console.log(foo);//foo is not defined

二.

1 var foo = 1;
2 function bar() {
3     foo = 10;            
4     return;
5     function foo() {};
6 }
7 bar();
8 console.log(foo);

理解要点：

1. bar（）函数作用域中，function foo（）{}；语句虽然在 return；语句后面，对的，return；语句后的所有语句都不会被执行，但是在执行代码前，函数声明会被提前处理，此时函数声明语句会被提升到当前作用域的最前面。即实际上是这样的：

 1 var foo = 1;
 2 function bar() {
 3     function foo() {};
 4     console.log(foo);//? foo() {}
 5     foo = 10;
 6     console.log(foo);//10        
 7     return;
 8     function foo() {};//return；后的语句不执行
 9     console.log(foo);
10 }
11 bar();
12 console.log(foo);

2. 既然 bar（）函数作用域中已经有了 foo 的声明，说明 bar（）中 foo 只是一个局部变量，在 bar（）执行完毕就会被销毁，不影响全局作用域中的 foo 变量，所以:

1 var foo = 1;
2 function bar() {
3     foo = 10;            
4     return;
5     function foo() {};
6 }
7 bar();
8 console.log(foo);//1

三.

1 var a = 1;
2 function fn() {
3     console.log(a);
4     var a = 2;
5 }
6 fn();
7 console.log(a);

理解要点:

1. 函数 fn（）的变量声明语句var a = 2；会提升；

2. fn （）存在函数局部变量 a；与全局作用域中的变量 a 互不影响；

所以实际上是这样的：

1 var a = 1;
2 function fn() {
3     var a;
4     console.log(a);//undefined
5     a = 2;
6     console.log(a);//2
7 }
8 fn();
9 console.log(a);//1

即：

1 var a = 1;
2 function fn() {
3     console.log(a);//undefined
4     var a = 2;
5 }
6 fn();
7 console.log(a);//1

四.

1 var a = 1;
2 function fn(a) {
3     console.log(a);
4     var a = 2;
5 }
6 fn(a);
7 console.log(a);

理解要点：

1. 函数形参是存在于函数作用域中的局部变量，所以此题 fn（a）中相当于声明了一个局部变量 a；

2. fn（a）；相当与 fn（1）；

所以：

1 var a = 1;
2 function fn(a) {
3     console.log(a);
4     var a = 2;
5 }
6 fn(a);
7 console.log(a)//1

又是华丽丽的分割线———————————————————————————————————————————

以下另外一些思考题，可以自行理解喔 ^_^

 1 var foo = 0;
 2 (function fn1(){
 3     foo = 1;
 4     console.log(foo);//1
 5     (function fn2(){
 6         var foo = 2;
 7         console.log(foo);//2
 8         (function fn3(){
 9             foo = 3;
10             console.log(foo);//3
11         }());
12     }());
13 }());
14 console.log(foo);//1

1 (function fn1(){
2     (function fn2(){
3         (function fn3(){
4             foo = 3;
5         }());
6     }());
7 }());
8 console.log(foo);//3

1 (function fn1(){
2     (function fn2(){
3         var foo;
4         (function fn3(){
5             foo = 3;
6         }());
7     }());
8 }());
9 console.log(foo);//Uncaught ReferenceError: foo is not defined