4.js - 8.js函数与闭包 - 《Web 前端工程师-2022》

1、函数定义与调用
2、JavaScript 全局函数
3、js闭包

1、函数定义与调用

  <script>
        // es5函数定义
        function add(x, y) {
            return x + y;
        }
        // 函数调用
        console.log(add(10, 20));
        //es6箭头函数定义
        let add1 = (x,y) => x+y;
        let add2 = (x,y) => {
            let z = 10;
            return x+y+z;
        }
        let classResult = (x,y) =>{
            let z = 10;
            return ({x,y,z});
        }
        // 函数调用
        console.log(add1(1,2));
        console.log(add2(1,2));
        console.log(classResult(1,2));
  </script>

  <script>
        function add(){
        };
        let add1 = () => {
        }
        let name = "azhi";
        let user = {
            //属性名和属性值是同样的可以省略
            name,
            age: 18,
            getUsername: function () {
                console.log("es5写法");
            },
            getUsername1() {
                console.log("es6写法,在大括号里的函数可以简化省略: function");
            },
        }
        console.log(user.name);
  </script>

2、JavaScript 全局函数

函数	描述
decodeURI()	解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()	把字符串编码为 URI。
encodeURIComponent()	把字符串编码为 URI 组件。
escape()	对字符串进行编码。
eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。
isFinite()	检查某个值是否为有穷大的数。
isNaN()	检查某个值是否是数字。
Number()	把对象的值转换为数字。
parseFloat()	解析一个字符串并返回一个浮点数。
parseInt()	解析一个字符串并返回一个整数。
String()	把对象的值转换为字符串。
unescape()	对由 escape() 编码的字符串进行解码。

3、js闭包

优点：

①封装功能
②防止全局变量污染
③ 延长变量的生命周期，缓存上一次执行的结果
④实现局部变量/函数私有化

缺点：

①浪费内存（尤其是引用了较大的对象）

注意事项：

①因为调用函数会创建闭包，所以要避免嵌套调用/递归调用闭包函数

示例代码1：

下面我们看一下计算总数的这个代码，我们定义了一个全局的变量sum，用于存储累计的结果，如下：

    <body>
        <script>
            var sum = 0;
            function add(a){
                sum += a;
            };
            add(1);
            add(2);
            add(3);
            console.log(sum);    //sum : 6
        </script>
    </body>

示例代码2：

上面这样写是可以实现我们想要的效果的，但sum是全局的变量，程序随时可以改变值，这样的设计不够完善，我们有没办法在add函数中定义一个参数来存储累计的结果值呢？答案是可以的，我们可以再看下面的闭包代码：

    <body>
        <script>
            var add = (function(){
                var sum = 0;
                return function(a){
                   return sum += a;
                }
            })();
            add(1);
            add(2);
            console.log(add(3));    //result : 6
        </script>
    </body>

示例代码3：

关于闭包，我们知道它的缺点是有内存泄露问题，我们看下下面的闭包代码：

    <body>
        <button id="btn">增加</button>
        <script>
            var add = (function(a){
                var array = [];
                return function(){
                    return array.push(a);
                }
            })();
            var aCount = 0;
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                for(var i=0;i<10000000;i++){
                    aCount++;
                    add("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
                }
                console.log(aCount);
            };
        </script>
    </body>

js初始堆内存：

点击了几次增加按钮之后的js堆内存：

此时会发现堆内存长时间占用着没有释放。我们对上面的代码改造一下便可以实现堆内存释放了。

    <body>
        <button id="btn">增加</button>
        <script>
            function fn1(a){
                var array = [];
                return function(){
                    return array.push(a);
                }
            };
            var aCount = 0;
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                var add = fn1();
                for(var i=0;i<10000000;i++){
                    aCount++;
                    add("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
                }
                console.log(aCount);
                add = null;
            };
        </script>
    </body>

此时堆内存在一分钟内便会释放掉：

狂点增加按钮的话堆内存释放的时间就长点：