JS13day(函数定义方式,call、apply、bind改变this指向，严格模式，闭包，递归，浅拷贝方法，深拷贝函数封装)

函数

定义方式

        // 1. 自定义函数(命名函数) 
        function fn() { };
        // 2. 函数表达式 (匿名函数)
        let fun = function () { };
        // 3. 利用 new Function('参数1','参数2', '函数体');
        //执行效率低，也不方便书写，因此较少使用
        let  f = new Function('a', 'b', 'console.log(a + b)');  
        f(1, 2);   //3

• 函数也属于对象
• 所有函数都是Function的实例（对象）
• Function 里面参数都必须是字符串格式

调用方式

        // 1. 普通函数
        function fn() {
            console.log('人生的巅峰');
        }
        // fn();   fn.call()
        // 2. 对象的方法
        let o = {
            sayHi: function () {
                console.log('人生的巅峰');
            }
        }
        o.sayHi();
        // 3. 构造函数
        function Star() { };
        new Star();
        // 4. 绑定事件函数
        //  document.addEventListener('click', function () {})   // 点击了按钮就可以调用这个函数
        // 5. 定时器函数
        // setInterval(function() {}, 1000);  这个函数是定时器自动1秒钟调用一次
        // 6. 立即执行函数
        (function () {
            console.log('人生的巅峰');
        })();
        // 立即执行函数是自动调用

this指向

常规指向

        // 1. 普通函数 this 指向window
        function fn() {
            console.log('普通函数的this' + this);
        }
        fn();
        // 2. 对象的方法 this指向的是对象 o
        let o = {
            sayHi: function() {
                console.log('对象方法的this:' + this);
            }
        }
        o.sayHi();
        // 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
        function Star() {};
        Star.prototype.sing = function() {
        }
        let ldh = new Star();
        // 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
        let btn = document.querySelector('button');
        btn.onclick = function() {
            console.log('绑定时间函数的this:' + this);
        };
        // 5. 定时器函数 this 指向的也是window
        window.setTimeout(function() {
            console.log('定时器的this:' + this);
        }, 1000);
        // 6. 立即执行函数 this还是指向window
        (function() {
            console.log('立即执行函数的this' + this);
        })();

改变函数内部this指向

1.call方法

        // call 第一个可以调用函数 第二个可以改变函数内的this 指向
        // call 的主要作用可以实现继承
        function Father(uname, age, sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
        }
        function Son(uname, age, sex) {
            Father.call(this, uname, age, sex);
        }
        let son = new Son('刘德华', 18, '男');
        console.log(son.age);  //18

2.apply方法

        let arr = [1, 66, 3, 99, 4];
        let max = Math.max.apply(Math, arr);
        let min = Math.min.apply(Math, arr);
        let max2 = Math.max(...arr);
        console.log(max, min, max2);  //99 1 99

3.bind方法（重点）

bind() 方法不会调用函数。但是能改变函数内部this 指向

    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        // 1. 不会调用原来的函数   可以改变原来函数内部的this 指向
        // 2. 返回的是原函数改变this之后产生的新函数
        // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
        // 4. 有三个按钮,当点击了之后,就禁用这个按钮,1秒钟之后开启这个按钮

        let btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                // let that=this   //老方法设置that,setTimeout函数中this改成that也可以
                this.disabled = true
                setTimeout(function () {
                    this.disabled = false
                }.bind(this), 1000)   //高级方法bind,这里的this指向btns[i]
            })
        }
    </script>

严格模式

JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。

• 严格模式对正常的 JavaScript 语义做了一些更改：
  消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
  消除代码运行的一些不安全之处，保证代码运行的安全。
  提高编译器效率，增加运行速度。
  禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class, enum, export, extends, import, super 不能做变量名

严格模式下 this 指向问题

• 严格模式下全局作用域中函数中的 this 是 undefined。
• 以前在全局作用域函数中的 this 指向 window 对象。
• 以前构造函数时不加 new也可以 调用,当普通函数，this 指向全局对象
• 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错
• new 实例化的构造函数指向创建的对象实例。
• 定时器 this 还是指向 window 。
• 事件、对象还是指向调用者。

为脚本开启严格模式

    <!-- 为整个脚本(script标签)开启严格模式 -->
    <script>
        'use strict';
        //   下面的js 代码就会按照严格模式执行代码
    </script>
    <script>
        (function () {
            'use strict';
        })();
    </script>

为函数开启严格模式

    <!-- 为某个函数开启严格模式 -->
    <script>
        // 此时只是给fn函数开启严格模式
        function fn() {
            'use strict';
            // 下面的代码按照严格模式执行
        }
        function fun() {
            // 里面的还是按照普通模式执行
        }
    </script>

高阶函数

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。

        // 高阶函数-函数可以作为参数传递
        function fn(a, b, callback) {
            console.log(a + b);
            callback && callback();
        }
        fn(1, 2, function () {
            console.log('我是最后调用的');
        });

闭包

闭包（closure）指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计
简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。

• 闭包的主要作用: 延伸了变量的作用范围

    <script>
        // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
        // 一个作用域可以访问另外一个函数的局部变量 
        // 我们fn 外面的作用域可以访问fn 内部的局部变量
        // 闭包的主要作用: 延伸了变量的作用范围
        function fn() {
            let num = 10;
            function fun() {
                console.log(num);
            }
            // return fun;
            return function () {
                console.log(num);
            }
        }
        let f = fn();
        f();  //10
    </script>

调试闭包

点击显示li索引案例：

    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
   // 1. 我们可以利用动态添加属性的方式
        let lis = document.querySelectorAll('.nav li')
        for (let i = 0; i < lis.length; i++) {    //注意这里用的是let 如果是var则是函数作用域，会导致bug
            // lis[i].addEventListener('click', function () {
            //     console.log(i)
            // })
            lis[i].onclick = function () {
                console.log(i)
            }
        }
        // 2. 利用闭包的方式得到当前小li 的索引号
        for (let i = 0; i < lis.length; i++) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function (i) {
                // console.log(i);
                lis[i].onclick = function () {
                    console.log(i);
                }
            })(i);
        }
    </script>

定时器中的闭包：

    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        // 闭包应用-3秒钟之后,打印所有li元素的内容
        let lis = document.querySelectorAll('.nav li')
        for (let i = 0; i < lis.length; i++) {
            (function (i) {
                setTimeout(function () {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i);
        }
        //常规思路
        setTimeout(function () {
            for (let i = 0; i < lis.length; i++) {
                console.log(lis[i].innerHTML)
            }
        }, 1000)
    </script>

打车应用闭包案例：

    <script>
        // 闭包应用-计算打车价格 
        // 打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
        // 如果有拥堵情况,总价格多收取10块钱拥堵费
        // function fn() {};
        // fn();
        let car = (function () {
            let start = 13; // 起步价  局部变量
            let total = 0; // 总价  局部变量
            return {
                // 正常的总价
                price: function (n) {
                    if (n <= 3) {
                        total = start;
                    } else {
                        total = start + (n - 3) * 5
                    }
                    return total;
                },
                // 拥堵之后的费用
                yd: function (flag) {
                    return flag ? total + 10 : total;
                }
            }
        })();
        console.log(car.price(5)); // 23
        console.log(car.yd(true)); // 33
    </script>

递归

递归求阶乘：

    <script>
        function fn(n) {
            if (n <= 1) {
                return 1
            }
            else {
                return n * fn(--n)   //n--会栈溢出，先赋值后减
            }
        }
        console.log(fn(5))   //120
    </script>

递归遍历数组对象案例：

    <script>
        let data = [{
            id: 1,
            name: '家电',
            goods: [{
                id: 11,
                gname: '冰箱',
                goods: [{
                    id: 111,
                    gname: '海尔'
                }, {
                    id: 112,
                    gname: '美的'
                },]
            }, {
                id: 12,
                gname: '洗衣机'
            }]
        }, {
            id: 2,
            name: '服饰'
        }];
        // 我们想要做输入id号,就可以返回的数据对象
        // 1. 利用 forEach 去遍历里面的每一个对象
        function getID(json, id) {
            let o = {};
            json.forEach(function (item) {
                // console.log(item); // 2个数组元素
                if (item.id == id) {
                    // console.log(item);
                    o = item;
                    // 2. 我们想要得里层的数据 11 12 可以利用递归函数
                    // 里面应该有goods这个数组并且数组的长度不为 0 
                } else if (item.goods && item.goods.length > 0) {
                    o = getID(item.goods, id);
                }
            });
            return o;
        }
        console.log(getID(data, 1));
        console.log(getID(data, 111));
    </script>

深、浅拷贝

• 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.(如对象类型的复杂数据类型，只拷贝地址)
• 深拷贝拷贝多层, 每一级别的数据都会拷贝.
• Object.assign(target, ...sources) es6新增方法可以浅拷贝
• 例子：
  1.数组的slice方法对于第一层是深拷贝，但对于多层的时候，是复制的引用，所以是浅拷贝
  2.JSON对象的parse和stringify都是深拷贝

        let obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        let o = {};
        //通过for进行浅拷贝
        // for (let k in obj) {
        //     // k 是属性名   obj[k] 属性值
        //     o[k] = obj[k];
        // }
        //通过方法进行浅拷贝
        Object.assign(o, obj);
        console.log(o);
        // o.msg.age = 20;   //o和obj的age都被更改。输出一模一样
        console.log(obj);

• 深拷贝

    <script>
        // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
        // 封装函数 
        function deepCopy(newobj, oldobj) {
            for (let k in oldobj) {
                // 判断我们的属性值属于那种数据类型
                // 1. 获取属性值  oldobj[k]
                let item = oldobj[k];
                // 2. 判断这个值是否是数组(数组也是对象，但是形式不同)
                if (item instanceof Array) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item)
                } else if (item instanceof Object) {
                    // 3. 判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item)
                } else {
                    // 4. 属于简单数据类型
                    newobj[k] = item;
                }
            }
        }
        //测试
        let obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };
        let o = {};
        deepCopy(o, obj);
        console.log(o);
        let arr = [];
        console.log(arr instanceof Object);    //true
        o.msg.age = 20;
        console.log(obj);
    </script>