函数

function

1. 作用域 scope

   1. 变量只在定义的函数中可以使用。

2. 作用域覆盖 scope overriding/shadowing

   • var bookTitle = "Le Petit Prince";
     
     function displayBookEnglish() {
         bookTitle = "The Little Prince";
     }
     
     displayBookEnglish();
     console.log(bookTitle);
     //输出为 The Little Prince
     

   • 在displayBookEnglish中，bookTitle被reassigned，造成作用域覆盖，为了避免这种情况，可如下操作，其他不改动

   • function displayBookEnglish() {
         var bookTitle = "The Little Prince";
     }
     

   • 尝试访问标识符时，从当前函数开始查找，然后向上搜索，知道全局作用域

3. 块级作用域 Block Scope

   1. ES6用let关键字实现块级作用域

      1. var x = 10;
         // 这里输出 x 为 10
         {  
             let x = 2;
             // 这里输出 x 为 2
         }
         // 这里输出 x 为 10
         

   2. 用var关键字声明的变量不具备块级作用域的特性，在{ }外依然能被访问到

      1. var  x = 10;
         // 这里输出 x 为 10
         {  
             var x = 2;
             // 这里输出 x 为 2
         }
         // 这里输出 x 为 2
         

4. hoisting 提升

   1. Before any JavaScript is executed, all function declarations are "hoisted" to the top of their current scope.

      • sayHi("Julia");
        
        function sayHi(name) {
          console.log(greeting + " " + name);
          var greeting;
        }
        

      • 所以像这样时可以运行的，输出为undefined Julia

      • 解释器(JS不需要编译)解释时

      • function sayHi(name) {
          console.log(greeting + " " + name);
          var greeting;
        }
        
        sayHi("Julia");
        

   2. 同样的，变量也是

      • sayHi("Julia");
        
        function sayHi(name) {
          console.log(greeting + " " + name);
          var greeting = "Hello";
        }
        

      • 输出为undefined Julia

      • 解释时

      • function sayHi(name) {
          var greeting;
          console.log(greeting + " " + name);
          greeting = "Hello";
        }
        
        sayHi("Julia");
        

      • 注意，只是declaration提前，assigned并没有提前

   3. 所以要在脚本的顶部声明函数和变量

5. 函数表达式

   1. function expression,变量中存储函数

      1. var catSays = function(max) { 
           //函数是否有名称无所谓，但调用只能使用变量名
         };
         与下面相同
         function catSays(max) {
         
         }
         //调用方法都是catSays();
         

   2. 函数表达式和提升

      • 涉及变量赋值，函数表达式不会hoist

      • function cat() {
            console.log(meow(2));
            var meow = function(max) {
                var catMessage = "";
                for (var i = 0; i < max; i++) {
                    catMessage += "meow ";
                }
                return catMessage;
            }
            function purr() {
                return "purrrr!";
            }
        }
        cat();
        
        // Typeerror: meow()is not a function
        

6. 回调-- 传递到另一个函数中的函数

   1. 作为参数的函数

      • // 函数表达式 catSays
        var catSays = function(max) {
            var catMessage = "";
            for (var i = 0; i < max; i++) {
              catMessage += "meow ";
            }
            return catMessage;
          };
        
        //函数声明helloCat接受一个回调
        function helloCat(callbackFunc) {
          return "Hello " + callbackFunc(3);
        }
        
        // catSays 作为回调函数传入
        console.log(helloCat(catSays));
        

   2. 内嵌函数表达式

      1. // 将函数 displayFavorite 分配给变量 favoriteMovie 的函数表达式
         var favoriteMovie = function displayFavorite(movieName) {
             console.log("My favorite movie is " + movieName);
         }
         
         // 函数声明有两个参数：一个显示消息函数和一个电影名称
         function movies(messageFunction, name) {
             messageFunction(name);
         }
         
         // 调用 movies 函数，传入 favoriteMovie 函数和电影名称
         movies(favoriteMovie, "Finding Nemo");
         

      2. 将上面的代码改为内嵌函数表达式

         • //函数声明
           function movies(messageFunction, name) {
               messageFunction(name);
           }
           
           //调用movies函数
           movies(function displayFavorite(movieName) {
               console.log("My Favorite movie is " + movieName);
           }, "Finding Nemo");
           

         • why?

           • 该函数回调不会再其他地方重复使用