你的位置:首页 > Java教程

[Java教程]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();