Javascript我学之四作用域

| 阅读数:--次| 作者:js,javascript
摘要:本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘作用域 JavaScript的变量作用域只有两种,全局作用域和函数作用域。函数的作用域 函数中定义的变量是私有的,仅在本函数范围内有效,称为“函数作用域”。 1 //每个函数,都定义了一个作用域2 ...

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

作用域 

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

 

函数的作用域

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

          

1        //每个函数,都定义了一个作用域
        function add(num1, num2) {
            var sum = num1 + num2;
            return sum;
        }
        console.info(add(100, 200));  //300
        console.info(sum);  //出错!

 

块作用域与同名变量

           JavaScript是没块作用域的

1          function doSomething(doIt) {
            var color = "blue";
            if (doIt) {
                var color = "red";
                console.info("在条件语句中的Color=" + color);
            }
            console.info("在条件语句外的Color=" + color);
        };
       
        doSomething(false);    //在条件语句外的Color=blue
        doSomething(true);     //在条件语句中的Color=red,在条件语句外的Color=red

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

 

变量提升(Hoist)        

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

1          //hoist: 变量提升
        var v = "hello";
        (function () {
            //输出undefined
            console.info(v);
            var v = "world";
        })();

等价于

1         var v = "hello";
        (function () {
            var v;
            console.info(v);
            v = "world";
        })();

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

嵌套函数可访问的变量

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

1         //嵌套函数的变量访问
        var world = "world ";
        function sayHello() {
            var hello = "Hello ";
            function inner() {
                var info = " in inner function";
                console.info(hello + world + info);
            }
            inner();
        }
        sayHello();  //hello world  in inner function

 

再谈同名变量

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

1         var myColor = "red";
        //输出:myColor before myFunc() red
        console.info("myColor before myFunc()", myColor);
        function myFunc() {
            //这里有没有var,很关键! 没写var, mycolor就变成全局变量
            var myColor = "blue ";
            //输出:myColor inside myFunc() blue
            console.info("myColor inside myFunc()", myColor);
        }
        myFunc();
        //输出:myColor after myFunc() red
        //当第6行去掉var时,这里输出:myColor after myFunc() blue
        console.info("myColor after myFunc()", myColor);

 

变量的查找过程

 自下而上,由内至外

1         //变量的查找过程
        var color = "blue";
        function outer() {
            function getColor() {
                return color;
            }
            console.info(getColor()); //blue
        };
        outer();

 

返回顶部
学到老代码浏览 关闭浏览