函数进阶

一、 函数的定义和调用

1、函数的定义方式

（1）自定义函数（命名函数）

function fn(){}

（2）函数表达式（匿名函数）

let func = function() {};

（3）利用new Function(‘参数1’,‘参数2’,‘函数体’)

let fn = new Function('a', 'b', 'console.log(a + b);');

• Function 里面参数都必须是字符串格式
• 第三种方式执行效率低，也不方便书写，因此较少使用
• 所有函数都是 Function 的实例化对象
• 函数也属于对象
• Function 方式效率低，操作麻烦，作了解

函数也属于对象，同样有原型对象，原型链：

2、函数的调用方式

• 普通函数：

function fn(){
 }

调用：直接加括号，fn()

• 对象的方法：

let o={
    sing:function(){
     }
}

调用：加小数点方式， o.sing()

• 构造函数：

function Star(){}

调用：new 构造函数 new Star()

• 绑定事件函数：

btn.onclick = function(){}

调用：触发相应事件，例如 click 点击触发函数

• 定时器函数：

setInterval(function(){},1000)

调用：每隔一段时间调用函数

• 立即执行函数：

(function() {})()

调用：自动调用，直接执行

二、this

1、函数内 this 的指向

函数的不同调用方式决定了this的指向不同

this指向

2、改变函数内部 this 指向

JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题，常用的有 bind()、call()、apply() 三种方法。

（1）call

call() 方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

fun.call(thisArg, arg1, arg2, ...);

参数说明：

• thisArg：在 fun 函数运行时指定的 this 值
• arg1，arg2：传递的其他参数

返回值就是函数的返回值，因为它就是调用函数
call既能实现调用，也能改变 this 指向，最主要的作用是可以实现继承

（2）apply

apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

fun.apply(thisArg, [argsArray])

• thisArg：在fun函数运行时指定的 this 值
• argsArray：传递的值，必须包含在数组里面

返回值就是函数的返回值，因为它就是调用函数
apply既能实现调用，也能改变 this指向， apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

案例：apply + Math.max()求数组的最大值（利用apply借助数学内置对象求最大值）

let arr = [-10, 2, 12, 3, 1];
let max = Math.max.apply(Math, arr);
console.log(max); // 12

（3）bind

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

let fn = fun.bind(thisArg, arg1, arg2, ...)

• thisArg：在 fun 函数运行时指定的 this 值
• arg1，arg2：传递的其他参数

返回由指定的 this 值和初始化参数改造的 原函数拷贝
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind

let obj = {
    x: 'a',
    y: 'b'
};
let fn = function () {
    console.log(this);
};
let f = fn.bind(obj);
f(); // { x: 'a', y: 'b' }

bind应用：（不需要立即调用&&想要改变this指向）

<button>点击</button>
    <script>
        // 我们有一个按钮，当点击这个按钮后禁用，3s后开启这个按钮
        let btn = document.querySelector('button')
        btn.onclick=function(){
            this.disabled = true          //this指向按钮
            setInterval(function(){
                this.disabled = false     
                //定时器中的this指向window，而非按钮，应该指向按钮
                //使用bind,可以实现改变this指向，又不会直接调用，因为要3s后才启用
            }.bind(this),3000)   
            //bind在定时器外面，点击事件里面，这个this指向按钮，
            //给定时器绑定bind，实现了将定时器里面的this指向这个this，即按钮
        }
  </script>

可以通过外面定义一个that变量实现，但是没有使用bind简单

3 、call apply bind 总结

相同点：都可以改变函数内部的 this 指向

区别点:

• call 和 apply 会调用函数, 并且改变函数内部this指向
• call 和 apply 传递的参数不一样，call 传递参数 aru1, aru2.. 形式，apply 必须数组形式 [arg]
• bind 不会调用函数，可以改变函数内部 this 指向，并返回一个原函数的拷贝

使用场景

• call经常做继承
• apply 经常和数组有关，比如借助数学对象实现数组最大最小值
• bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向

三、 严格模式

1、什么是严格模式

JavaScript 除了提供正常模式外，还提供了 严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码。

严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。

严格模式对正常的 JavaScript 语义做了一些更改：

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

2、开启严格模式

严格模式可以应用到整个脚本或个别函数中。因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。

（1）为脚本开启严格模式

为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句：在所有语句之前放一个特定语句 "use strict";（或'use strict';）

<script>
    'use strict';
    console.log('严格模式已开启');
<script/>

因为 "use strict" 加了引号，所以老版本的浏览器会把它当作一行普通字符串而忽略。

也可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他 script 脚本文件。

<script>
    (function (){
        "use strict";
        var num = 10;
    })();
</script>

（2）为函数开启严格模式

要给某个函数开启严格模式，需要把 "use strict";（或 'use strict';）声明放在函数体所有语句之前。

将 "use strict" 放在函数体的第一行，则整个函数以 “严格模式” 运行。

function fn(){
　　"use strict";
　　return "这是严格模式。";
}
function foo() {
    console.log("这不是严格模式");
}

3、 严格模式中的变化

严格模式对 Javascript 的语法和行为，都做了一些改变。

（1）变量规定

• 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用 var （let、const）命令声明，然后再使用。

• 严禁删除已经声明变量。例如：delete x; 语法是错误的。

（2）严格模式下 this 指向问题

• 以前在全局作用域函数中的 this 指向 window 对象。

• 严格模式下全局作用域中函数中的 this 是 undefined。

• 以前构造函数时不加 new 也可以 调用,当普通函数，this 指向全局对象
  
  

• 严格模式下,如果 构造函数不加 new 调用, this 指向的是 undefined ，如果给他赋值则会报错
  

• new 实例化的构造函数指向创建的对象实例。
  定时器 this 还是指向 window。
  事件、对象还是指向调用者。

（3）函数变化

• 函数不能有重名的参数。
• 函数必须声明在顶层。新版本的 JavaScript 会引入 “块级作用域”（ ES6 中已引入）。为了与新版本接轨，不允许在非函数的代码块内声明函数。
  

四、高阶函数

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

function fn(callback){
    callback&&callback();
}
fn(function(){alert('hi')}

function fn(){
    return function() {}
}
 fn();

此时 fn 就是一个高阶函数。

函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。

同理函数也可以作为返回值传递回来

五、闭包

1、变量作用域

变量根据作用域的不同分为两种：全局变量和局部变量。

• 函数内部可以使用全局变量。
• 函数外部不可以使用局部变量。
• 当函数执行完毕，本作用域内的局部变量会销毁。

2、闭包的概念

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

function fn1() {
    var s = "hello"; // x 是一个被 fn1 创建的局部变量
    function fn2() { // fn2() 是内部函数，一个闭包
        console.log(s); // 使用了父函数中声明的变量
    }
    fn2();
}
fn1();

3、在 chrome 中调试闭包

• 打开浏览器，按 F12 键启动 chrome 调试工具。
• 设置断点。
• 找到 Scope 选项（Scope 作用域的意思）。
• 当我们重新刷新页面，会进入断点调试，Scope 里面会有两个参数（global 全局作用域、local 局部作用域）。
• 当执行到 fn2() 时，Scope 里面会多一个 Closure 参数 ，这就表明产生了闭包。

4、闭包的作用

如何在 fn1() 函数外面访问 fn1() 中的局部变量 x ？

function fn1() {
    let x = 10;
    // fn2 是一个闭包
    function fn2() {
        console.log(x);
    }
    return fn2;
}
let f = fn1();
f(); // 10

利用f = fn1() 可以得到f = fn2，fn2可以访问x,所以f也可以，且fn1调用结束后x也不会被销毁，因为f还要调用

闭包作用：延伸变量的作用范围。

5、闭包的案例

以下案例都是在ES5前提下，所以没有提及 let、const

有以下节点：

<ol>
    <li>Banana</li>
    <li>Apple</li>
    <li>Peach</li>
</ol>

（1）闭包应用-点击 li 输出当前索引号

循环注册 “点击li输出当前li索引号”。
错误示例：

for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        console.log(i); 
        // 一直输出最后一个的索引号
    }
}

因为for是同步事件，会立即执行，但是点击是异步事件，不会立马执行，所以就会发生for 里面的i会一直自增，等到点击事件执行时已经为3了，所以只要点击就会输出最后一个索引号

方案1：设置 index 属性：

for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].onclick = function () {
        console.log(this.index);
    }
}

方案2：闭包:

for (var i = 0; i < lis.length; i++) {
    (function (i) { //接过来 i
        // 每一个点击事件的函数成为一个闭包，点击事件内部访问到了来自立即执行函数的变量 i
        lis[i].onclick = function () {
            console.log(i);
        }
    })(i); //把 i 传过去
}

（2）闭包应用-3s后打印所有li内容

for (var i = 0; i < lis.length; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(lis[i].innerHTML);
        }, 3000);
    })(i);
}

（3）闭包应用-计算打车价格

• 打车起步价 13（3 公里内）, 之后每多一公里增加 5 块钱，用户输入公里数就可以计算打车价格
• 如果有拥堵情况，总价格多收取 10 块钱拥堵费

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

六、递归

1、什么是递归

如果 一个函数在内部可以调用其本身，那么这个函数就是 递归函数。
简单理解:函数内部自己调用自己, 这个函数就是递归函数。
递归函数的作用和循环效果一样。

由于递归很容易发生 “栈溢出” 错误（stack overflow），所以必须要加退出条件 return。

2、递归举例

（1）求阶乘

let factorial = function (n) {
    if (n == 0 || n == 1) return 1;
    return n * factorial(n - 1);
}

（2）斐波那契数列

let fibonacci = function (n) {
    if (n < 2) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
};

（3）浅拷贝与深拷贝

浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用（修改目标对象的值，源对象的值也会改变，因为对象属性指向同一地址）。

Object.assign(target, ...sources) es6 的新增方法，可以实现浅拷贝。

深拷贝拷贝多层，每一级别的数据都会拷贝。

var obj = {
            name: '岳云鹏',
            age: 30,
            hobby: ['卖萌', '唱歌', '燕子'],
            address: {
                city: '北京',
                name: '德云社'
            }
        };
        var copyObj = {};
        //深拷贝：拷贝出来的目标对象和源目标对象，互不影响，修改其中的一个值，另外的对象不受影响。
        //实现深拷贝,取复杂类型和数组里面的值，放在新的变量中
        function deepCopy(newObj, oldObj) {
            for (var key in oldObj) {
                //获取对象的每项属性或方法的值
                var item = oldObj[key];
                //如果是数组 
                if (item instanceof Array) {
                    //就遍历，逐个赋值
                    newObj[key] = [];
                    deepCopy(newObj[key], item);
                } else if (item instanceof Object) {
                    //如果是复杂对象类型
                    newObj[key] = {};
                    deepCopy(newObj[key], item);
                } else {
                    //如果是简单类型
                    newObj[key] = item;
                }
            }
        }
deepCopy(copyObj, obj);