js高级03

函数的定义和调用

函数的定义方式

1.函数声明方式function关键字(命名函数)

function fn() {}

2.函数表达式(匿名函数)

var fun = function () {}

3.new Function()

 var f = new Function('参数1', '参数2', '函数体');

示例

 var f = new Function('a', 'b', 'console.log(a + b)');
        f(1, 2);//3

Function里面的参数都必须是字符串格式

第三种方式执行效率低，较少使用

所有函数都是Function的实例（对象）

函数也属于对象

函数原型三角关系

函数调用方式

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

this

函数内的this指向

一般指向调用者

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象，原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

改变函数内部this指向

1.call方法

语法：

fn.apply(thisArg,arg1,arg2,..)

1.thisArg：在函数运行时指定的this值

2.arg1,arg2：传递的其它参数

call既可以调用函数，也可以改变函数内的this指向

call的主要作用是实现继承

2.apply方法

apply()方法既可以调用函数也可以改变函数的this指向

语法：

fn.apply(thisArg,[argsArray])

1.thisArg:在函数运行时指定的this值

2.argsArray：传递的值，必须是在数组里面

3.返回值就是函数的返回值，因为它就是调用函数

 var o = {
            name: 'andy'
        };

        function fn(arr) {
            console.log(this);//o
            console.log(arr); //green
        }
        fn.apply(o, ['green']);
        //1.调用函数和改变this指向
        //2.它的参数必须是数组(伪数组)
        //3.apply的主要应用是利用apply借助数学内置对象求最大值和最小值
        //Math.max()
        var arr = [1, 66, 3, 99, 5];
        var max = Math.max.apply(Math, arr);
        var min = Math.min.apply(Math, arr);
        console.log(max, min);//99,1

3.bind方法

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

语法

fn.bind(thisArg,arg1,arg2,...)

1.thisArg：在函数运行时指定的this值

2.arg1,arg2：传递的其它参数

3.返回由指定的this值和初始化参数改造的原函数拷贝

 var o = {
            name: 'andy'
        };

        function fn(a, b) {
            console.log(this);//o
            console.log(a + b);//3

        };
        var f = fn.bind(o, 1, 2);
        f();
        //1.不会调用原来的函数，可以改变原来函数内部的this指向
        //2.返回的是原函数改变this之后产生的新函数
        //3.如果有的函数我们不需要立即调用，但是又想改变函数内部的this指向，此时用bind

bind应用场景

有几个按钮，点击其中一个按钮之后，就禁用这个按钮，两秒钟之后开启这个按钮

 <button>点击1</button>
 <button>点击2</button>
 <button>点击3</button>
  <script>
        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                this.disabled = true; //这个this指向btns按钮
                setTimeout(function () {
                    this.disabled = false; //此时定时器函数里面的this指向btns
                }.bind(this), 2000) //这个this指向btns
            }
        }
    </script>

call apply bind总结

相同点：

都可以改变this指向

区别点：

1.call和apply会调用函数，并且改变函数内部this指向

2.call和apply传递的参数不一样，call传递参数aru1,aru2…形式，apply必须是数组形式[arg];

3.bind不会调用函数，可以改变函数内部this指向

主要应用场景

1.call经常做继承

2.apply经常跟数组有关系，比如借助数学对象实现数组的最大值和最小值

3.bind不调用函数，但是可以改变this指向，比如改变定时器内部的this指向

严格模式

严格的条件下运行js代码

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

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

1.消除javascipt语法一些不合理，不严谨之处，减少了一些怪异行为

2.消除代码运行的一些不安全之处，保证代码运行的安全。

3.提高编译器效率，增减运行速度

4.禁用了在ECMAScript的未来版本中可能会定义一些语法，为未来版本的javascript做好铺垫。比如一些保留字如:class,enum,export,extends,import,super不能做变量名

开启严格模式

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

情况一 :为脚本开启严格模式

有的 script 脚本是严格模式，有的 script 脚本是正常模式，这样不利于文件合 并，所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建 一个作用域而不影响其他 script 脚本文件。

<script>
        (function () {
            //在当前的这个自调用函数中有开启严格模式，当前函数之外还是普通模式 
            "use strict";
            var num = 10;
            function fn() {}
        })()
    </script>
    //或者
    <script>
        'use strict';//当前script标签开启了严格模式 
    </script>

情况二: 为函数开启严格模式

要给某个函数开启严格模式，需要把“use strict”; (或 ‘use strict’; ) 声明放在函数 体所有语句之前。

 function fn(){
            "use strict";
            return '123';
        }
        //当前fn函数开启了严格模式

严格模式中的变化

1.变量规定

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

2.严禁删除已经声明变量，例如，delete x；语法是错误的

2.严格模式下this指向问题

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

2.严格模式下全局作用域函数中的this指向undefined

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

4.严格模式下，如果构造函数不加new调用，this会报错

5.new实例化的构造函数指向创建的对象实例。

6.定时器this还是指向window

7.事件、对象还是指向调用者

3.函数变化

1.函数不能有重名的参数

2.函数必须声明在顶层，新版本的javascript会引入“块级作用域”，为了与新版本接轨，不允许在非函数的代码内声明函数

高阶函数

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

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

闭包

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

1.函数内部可以使用全局变量。

2.函数外部不可以使用局部变量。

3.当函数执行完毕，本作用域内的局部变量会销毁

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

闭包的作用

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

案例：点击li输出当前li的索引号

方法一：利用动态添加属性的方式

 <ul class="nav">
        <li>香蕉</li>
        <li>苹果</li>
        <li>榴莲</li>
        <li>菠萝</li>
    </ul>
    <script>
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function () {
                console.log(this.index);
            }
        }
    </script>

方法二：利用闭包实现

<ul class="nav">
        <li>香蕉</li>
        <li>苹果</li>
        <li>榴莲</li>
        <li>菠萝</li>
    </ul>
    <script>
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            //利用for循环创建4个立即执行函数
            //  立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变 量
            (function (i) {
                lis[i].onclick = function () {
                    console.log(i);
                }
            })(i)
        }
    </script>

案例：闭包应用3秒钟之后，打印所有li元素里面的内容

 <ul class="nav">
        <li>香蕉</li>
        <li>苹果</li>
        <li>榴莲</li>
        <li>菠萝</li>
    </ul>
    <script>
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function (i) {
                setTimeout(function () {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i)
        }
    </script>

递归

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解：函数内部自己调用自己，这个函数就是递归函数

递归函数的作用和循环效果一样

由于递归很容易发生"栈溢出",错误，所以必须加退出条件

var num = 1;

        function fn() {
            console.log('我要打印6句话');
            if (num == 6) {
                return; //递归里面必须加退出条件
            }
            num++;
            fn();
        }
        fn();

利用递归函数求1~n的阶乘1 * 2 * 3 * 4 *…n

 function fn(n) {
            if (n == 1) {
                return 1;
            }
            return n * fn(n - 1);
        }
        console.log(fn(3));//6
        console.log(fn(4));//24
        //详细思路 假如用户输入的是3
        //return 3 * fn(2);
        //return 3 * (2 * fn(1));
        //return 3 * (2 * 1);
        //return 3 * (2);
        //return 6

利用递归函数求斐波那契数列（兔子序列）1、1、2、3、5、8、13、21…。用户输入一个数字n就可以求出这个数字对应的兔子序列值，

分析：只需要知道用户输入的n前两项(n-1 n-2)就可以计算出n对应的序列值

function fb(n) {
            if (n === 1 || n === 2) {
                return 1;
            }
            return fb(n - 1) + fb(n - 2);
        }
        console.log(fb(3));//2
        console.log(fb(4));//3

浅拷贝和深拷贝

1.浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用(地址)

2.深拷贝拷贝多层，每一集别的数据都会拷贝

3.Object.assign(target,sources) es6新增方法可以浅拷贝