函数的进阶

目录

1、函数的定义和调用

1.1 函数的定义方式

1.2 函数的调用方式 

2、this 

2.1 函数内 this 的指向

 2.2 改变函数内部 this 指向

1. call 方法 

2. apply 方法 

3. bind 方法

2.3 call  apply  bind 总结 

3、严格模式 

3.1 什么是严格模式 

3.2 开启严格模式 

1. 为脚本开启严格模式 

 2. 为函数开启严格模式

3.3 严格模式中的变化 

1. 变量规定

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

3. 函数变化 

4、高阶函数 

5、闭包

5.1 变量作用域 

5.2 什么是闭包 

 5.3 在 chrome 中调试闭包

5.4 闭包的作用

5.5 闭包案例 

1. 循环注册点击事件。

2. 循环中的 setTimeout()。

3. 计算打车价格。

5.6 闭包总结 

1.闭包是什么？   

2. 闭包的作用是什么？

6、递归

6.1 什么是递归？ 

 6.2 利用递归求数学题

 6.3 利用递归求:根据id返回对应的数据对象

 6.4 浅拷贝和深拷贝 

1.浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.

2.深拷贝拷贝多层, 每一级别的数据都会拷贝.

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

---

1、函数的定义和调用

1.1 函数的定义方式

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

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

3. new Function()

var fn = new Function('参数1','参数2'..., '函数体')

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

第三种方式执行效率低，也不方便书写，因此较少使用

所有函数都是 Function 的实例 ( 对象 ) 

函数也属于对象

//  函数的定义方式

        // 1. 自定义函数(命名函数) 

        function fn() {};

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

        var fun = function() {};


        // 3. 利用 new Function('参数1','参数2', '函数体');

        var f = new Function('a', 'b', 'console.log(a + b)');
        f(1, 2);
        // 4. 所有函数都是 Function 的实例(对象)
        console.dir(f);
        // 5. 函数也属于对象
        console.log(f instanceof Object);

1.2 函数的调用方式 

1. 普通函数

2. 对象的方法

3. 构造函数

4. 绑定事件函数

5. 定时器函数

6. 立即执行函数

// 函数的调用方式

        // 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() {}, 1000);  这个函数是定时器自动1秒钟调用一次
        // 6. 立即执行函数
        (function() {
            console.log('人生的巅峰');
        })();
        // 立即执行函数是自动调用

2、this 

2.1 函数内 this 的指向

这些 this 的指向，是当我们调用函数的时候确定的。 调用方式的不同决定了this 的指向不同

一般指向我们的调用者.

 // 函数的不同调用方式决定了this 的指向不同
        // 1. 普通函数 this 指向window
        function fn() {
            console.log('普通函数的this' + this);
        }
        window.fn();
        // 2. 对象的方法 this指向的是对象 o
        var o = {
            sayHi: function() {
                console.log('对象方法的this:' + this);
            }
        }
        o.sayHi();
        // 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
        function Star() {};
        Star.prototype.sing = function() {

        }
        var ldh = new Star();
        // 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
        var 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);
        })();

 2.2 改变函数内部 this 指向

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

1. call 方法 

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

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

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

arg1 ， arg2 ：传递 的其他参数

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

因此当我们想 改变 this 指向 ，同时想调用这个函数的时候，可以使用 call ，比如继承

 // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // 1. call()
        var o = {
            name: 'andy'
        }

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

        };
        fn.call(o, 1, 2);
        // 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);
        }
        var son = new Son('刘德华', 18, '男');
        console.log(son);

2. apply 方法 

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

fun.apply(thisArg, [argsArray])

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

argsArray ：传递 的值，必须包含在 数组 里面

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

因此 apply 主要跟数组 有关系，比如使用 Math .max () 求 数组的最大值

// 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // 2. apply()  应用 运用的意思
        var o = {
            name: 'andy'
        };

        function fn(arr) {
            console.log(this);
            console.log(arr); // 'pink'

        };
        fn.apply(o, ['pink']);
        // 1. 也是调用函数 第二个可以改变函数内部的this指向
        // 2. 但是他的参数必须是数组(伪数组)
        // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 
        // Math.max();
        var arr = [1, 66, 3, 99, 4];
        var arr1 = ['red', 'pink'];
        // var max = Math.max.apply(null, arr);
        var max = Math.max.apply(Math, arr);
        var min = Math.min.apply(Math, arr);
        console.log(max, min);

3. bind 方法

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

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