正文 6704字数 320,201阅读

1.函数参数
1.1：参数是什么
在定义一个函数时，有时候需要为函数传递额外的数据，不同的外部数据会得到不同的结果，这种外部数据就叫做参数。
function keith(a){ return a+a; } console.log(keith(3)); //6
Run code
Cut to clipboard

    上面代码中，给keith函数传递了参数a，并且返回了a+a表达式。

    1.2：参数的省略
    函数参数不是必须的，javascript规范允许省略调用时传递的实际参数。
    function keith(a, b, c) { return a; } console.log(keith(1, 2, 3)); //1 console.log(keith(1)); //1 console.log(keith()); // 'undefined'
    Run code
    Cut to clipboard

      上面代码中，keith函数定义了三个参数，但是在调用时无论传递了多少个参数，javascript都不会报错。被省略的参数的默认值就变为undefined。

      函数的length属性会返回参数个数。需要注意的是，length属性与实际参数的个数无关，只是返回形式参数的个数。
      （实际参数：调用时传递的参数。 形式参数：定义时传递的参数。）
      但是没有办法省略只靠前的元素，而保留靠后的元素。如果一定要省略靠前的元素，只有显示传入
      undefined。 function keith(a, b) { return a; } console.log(keith(, 1)); //SyntaxError: expected expression, got ',' console.log(keith(undefined, 2)); //'undefined'
      Run code
      Cut to clipboard

        上面代码中，如果省略了第一个参数，浏览器就会报错。如果给第一个参数传递undefined，则不会报错。

        1.3：默认值
        在JavaScript中，函数参数的默认值是undefined。然而，在某些情况下设置不同的默认值是有用的。一般策略是在函数的主体测试参数值是否为undefined，如果是则赋予一个值，如果不是，则返回实际参数传递的值。
        function keith(a, b) { (typeof b !== 'undefined') ? b = b: b = 1; return a * b; } console.log(keith(15)); //15 console.log(keith(15, 2)) //30
        Run code
        Cut to clipboard

          上面代码中，做了个判断。当在调用时没有传入b参数，则默认为1。
          从ECMAScript 6开始，定义了默认参数(default parameters)。使用默认参数，在函数体的检查就不再需要了。
          function keith(a, b = 1) { return a * b; } console.log(keith(15)); //15 console.log(keith(15, 2)) //30
          Run code
          Cut to clipboard

            1.4：参数传递方式
            函数参数的传递方式有两种，一个是传值传递，一个是传址传递。
            当函数参数是原始数据类型时（字符串，数值，布尔值），参数的传递方式为传值传递。也就是说，在函数体内修改参数值，不会影响到函数外部。
            var a = 1; function keith(num) { num = 5; } keith(a); console.log(a); //1
            Run code
            Cut to clipboard

              上面代码中，全局变量a是一个原始类型的值，传入函数keith的方式是传值传递。因此，在函数内部，a的值是原始值的拷贝，无论怎么修改，都不会影响到原始值。

              但是，如果函数参数是复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference）。也就是说，传入函数的是原始值的地址，因此在函数内部修改参数，将会影响到原始值。
              var arr = [2, 5]; function keith(Arr) { Arr[0] = 3; } keith(arr); console.log(arr[0]); //3
              Run code
              Cut to clipboard

                上面代码中，传入函数keith的是参数对象arr的地址。因此，在函数内部修改arr第一个值，会影响到原始值。
                注意，如果函数内部修改的，不是参数对象的某个属性，而是替换掉整个参数，这时不会影响到原始值。
                var arr = [2, 3, 5]; function keith(Arr) { Arr = [1, 2, 3]; } keith(arr); console.log(arr); // [2,3,5]
                Run code
                Cut to clipboard

                  上面代码中，在函数keith内部，参数对象arr被整个替换成另一个值。这时不会影响到原始值。这是因为，形式参数（Arr）与实际参数arr存在一个赋值关系。（提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。）

                  1.5：同名参数
                  如果有同名参数，则取最后面出现的那个值，如果未提供最后一个参数的值，则取值变成undefined。
                  function keith(a, a) { return a; } console.log(keith(1, 3)); //3 console.log(keith(1)); //undefined
                  Run code
                  Cut to clipboard

                    如果想访问同名参数中的第一个参数，则使用arguments对象。
                    function keith(a, a) { return arguments[0]; } console.log(keith(2));　　//2
                    Run code
                    Cut to clipboard

                      1.6 arguments对象
                      JavaScript 中每个函数内都能访问一个特别变量 arguments。这个变量维护着所有传递到这个函数中的参数列表。
                      arguments 对象包含了函数运行时的所有参数，arguments[0]就是第一个参数，arguments[1]就是第二个参数，以此类推。这个对象只有在函数体内部，才可以使用。

                      可以访问arguments对象的length属性，判断函数调用时到底带几个参数。
                      function keith(a, b, c) { console.log(arguments[0]); //1 console.log(arguments[2]); //3 console.log(arguments.length); //4 } keith(1, 2, 3, 4);
                      Run code
                      Cut to clipboard

                        arguments对象与数组的关系
                        arguments 对象不是一个数组（Array）。 尽管在语法上它有数组相关的属性 length，但它不从 Array.prototype 继承(prototype、proto和constructor)，实际上它是一个类数组对象。因此，无法对 arguments 变量使用标准的数组方法，比如 push, pop 或者 slice。但是可以使用数组中的length属性。

                        通常使用如下方法把arguments对象转换为数组。
                        var arr = Array.prototype.slice.call(arguments);
                        Run code
                        Cut to clipboard


                          2.闭包
                          2.1：闭包定义
                          要理解闭包，需要先理解全局作用域和局部作用域的区别。函数内部可以访问全局作用域下定义的全局变量，而函数外部却无法访问到函数内部定义(局部作用域)的局部变量。
                          var a = 1; function keith() { return a; var b = 2; } console.log(keith()); //1 console.log(b); //ReferenceError: b is not defined
                          Run code
                          Cut to clipboard

                            上面代码中，全局变量a可以在函数keith内部访问。可是局部变量b却无法在函数外部访问。
                            如果需要得到函数内部的局部变量，只有通过在函数的内部，再定义一个函数。
                            function keith(){ var a=1; function rascal(){ return a; } return rascal; } var result=keith(); console.log(result()); //1 function keith(){ var a=1; return function(){ return a; }; } var result=keith(); console.log(result()) //1
                            Run code
                            Cut to clipboard

                              上面代码中，两种写法相同，唯一的区别是内部函数是否是匿名函数。函数rascal就在函数keith内部，这时keith内部的所有局部变量，对rascal都是可见的。但是反过来就不行，rascal内部的局部变量，对keith就是不可见的。这就是JavaScript语言特有的”链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。

                              所以，父对象的所有变量，对子对象都是可见的，反之则不成立。函数keith的返回值就是函数rascal，由于rascal可以读取keith的内部变量，所以就可以在外部获得keith的内部变量了。
                              闭包就是函数rascal，即能够读取其他函数内部变量的函数。

                              由于在JavaScript语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特点，就是它可以“记住”诞生的环境，比如rascal记住了它诞生的环境keith，所以从rascal可以得到keith的内部变量。

                              闭包可以使得它诞生环境一直存在。看下面一个例子，闭包使得内部变量记住上一次调用时的运算结果。
                              function keith(num) { return function() { return num++; }; } var result = keith(2); console.log(result()) //2 console.log(result()) //3 console.log(result()) //4
                              Run code
                              Cut to clipboard

                                上面代码中，参数num其实就相当于函数keith内部定义的局部变量。通过闭包，num的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中可以看到，闭包result使得函数keith的内部环境，一直存在。

                                通过以上的例子，总结一下闭包的特点：
                                1：在一个函数内部定义另外一个函数，并且返回内部函数或者立即执行内部函数。
                                2：内部函数可以读取外部函数定义的局部变量
                                3：让局部变量始终保存在内存中。也就是说，闭包可以使得它诞生环境一直存在。

                                闭包的另一个用处，是封装对象的私有属性和私有方法。
                                function Keith(name) { var age; function setAge(n) { age = n; } function getAge() { return age; } return { name: name, setAge: setAge, getAge: getAge }; } var person = Keith('keith'); person.setAge(21); console.log(person.name); // 'keith' console.log(person.getAge()); //21
                                Run code
                                Cut to clipboard

                                  2.2：立即调用的函数表达式（IIFE）
                                  通常情况下，只对匿名函数使用这种“立即执行的函数表达式”。它的目的有两个：一是不必为函数命名，避免了污染全局变量；二是IIFE内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

                                  循环中的闭包
                                  一个常见的错误出现在循环中使用闭包，假设需要在每次循环中调用循环序号
                                  for(var i=0;i<10;i++){ setTimeout(function(){ console.log(i); //10 }, 1000) }
                                  Run code
                                  Cut to clipboard

                                    上面代码中，不会符合预期，输出数字0-9。而是会输出数字10十次。
                                    当匿名函数被调用的时候，匿名函数保持着对全局变量 i 的引用，也就是说会记住i循环时执行的结果。此时for循环结束，i 的值被修改成了10。

                                    为了得到想要的效果，避免引用错误，应该使用IIFE来在每次循环中创建全局变量 i 的拷贝。
                                    for(var i = 0; i < 10; i++) { (function(e) { setTimeout(function() { console.log(e); //1,2,3,....,10 }, 1000); })(i); }
                                    Run code
                                    Cut to clipboard

                                      外部的匿名函数会立即执行，并把 i 作为它的参数，此时函数内 e 变量就拥有了 i 的一个拷贝。当传递给 setTimeout 的匿名函数执行时，它就拥有了对 e 的引用，而这个值是不会被循环改变的。

                                      或者使用let块级作用域变量
                                      <script> for(let i=0;i<10;i++){ setTimeout(function(){ console.log(i); //10 }, 1000) }</script>
                                      Run code
                                      Cut to clipboard


                                        js中三种定义变量的方式const， var， let的区别
                                        1.const定义的变量不可以修改，而且必须初始化。
                                        const b = 2;//正确 // const b;//错误，必须初始化 console.log('函数外const定义b：' + b);//有输出值 // b = 5; // console.log('函数外修改const定义b：' + b);//无法输出
                                        Run code
                                        Cut to clipboard

                                          2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
                                          var a = 1; // var a;//不会报错 console.log('函数外var定义a：' + a);//可以输出a=1 function change(){ a = 4; console.log('函数内var定义a：' + a);//可以输出a=4 } change(); console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4
                                          Run code
                                          Cut to clipboard

                                            3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。
                                            let c = 3; console.log('函数外let定义c：' + c);//输出c=3 function change(){ let c = 6; console.log('函数内let定义c：' + c);//输出c=6 } change(); console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3
                                            Run code
                                            Cut to clipboard