javascript我学之四作用域

本文是金旭亮老师网易云课堂的课程笔记，记录下来，以供备忘

作用域

Javascript的变量作用域只有两种，全局作用域和函数作用域。

函数的作用域

函数中定义的变量是私有的，仅在本函数范围内有效，称为“函数作用域”。

1        //每个函数，都定义了一个作用域2         function add(num1, num2) {3             var sum = num1 + num2;4             return sum;5         }6         console.info(add(100, 200));  //3007         console.info(sum);  //出错！

块作用域与同名变量

JavaScript是没块作用域的

 1          function doSomething(doIt) { 2             var color = "blue"; 3             if (doIt) { 4                 var color = "red"; 5                 console.info("在条件语句中的Color=" + color); 6             } 7             console.info("在条件语句外的Color=" + color); 8         }; 9        10         doSomething(false);    //在条件语句外的Color=blue11         doSomething(true);     //在条件语句中的Color=red,在条件语句外的Color=red

在if()语句块中定义的color变量，与外部定义的color同名，所以是同一个变量，这是因为javascript并没有块作用域。这与java,c#是不一样的。

变量提升（Hoist）

编译器把函数中后部定义的变量统一移到函数开头进行定义

1          //hoist: 变量提升2         var v = "hello";3         (function () {4             //输出undefined5             console.info(v);6             var v = "world";7         })();

等价于

1         var v = "hello";2         (function () {3             var v;4             console.info(v);5             v = "world";6         })();

所以在函数中定义变量时，要在函数开头集中定义变量，不要在“中途”“临时想起来”地定义变量。

嵌套函数可访问的变量

嵌套的函数，内部函数可以访问外部函数定义的变量，也能访问全局变量

 1         //嵌套函数的变量访问 2         var world = "world "; 3         function sayHello() { 4             var hello = "Hello "; 5             function inner() { 6                 var info = " in inner function"; 7                 console.info(hello + world + info); 8             } 9             inner();10         }11         sayHello();  //hello world  in inner function

再谈同名变量

定义变量时，一定要使用var！如没写，就会是全局变量.

 1         var myColor = "red"; 2         //输出：myColor before myFunc() red 3         console.info("myColor before myFunc()", myColor); 4         function myFunc() { 5             //这里有没有var，很关键！ 没写var, mycolor就变成全局变量 6             var myColor = "blue "; 7             //输出：myColor inside myFunc() blue 8             console.info("myColor inside myFunc()", myColor); 9         }10         myFunc();11         //输出：myColor after myFunc() red12         //当第6行去掉var时，这里输出:myColor after myFunc() blue13         console.info("myColor after myFunc()", myColor);

变量的查找过程

自下而上，由内至外

1         //变量的查找过程2         var color = "blue";3         function outer() {4             function getColor() {5                 return color;6             }7             console.info(getColor()); //blue8         };9         outer();