JavaScript高级之函数、严格模式、高阶函数、闭包与递归

你的名字 2023-02-14 15:57 71阅读 0赞

### JavaScript高级之函数、严格模式、高阶函数、闭包与递归 ###

*  JavaScript高级之函数、严格模式、高阶函数、闭包与递归
 *   *  1 函数的定义和调用
     *   *  1.1 函数的定义
         *  1.2 函数的调用
     *  2 this指向问题
     *   *  2.1 函数内部的this指向
         *  2.2 改变函数内部 this 指向
         *   *  2.2.1 call方法
             *  2.2.2 apply方法
             *  2.2.3 bind方法
             *  2.2.4 call、apply、bind三者的异同
     *  3 严格模式
     *   *  3.1 严格模式介绍
         *  3.2 开启严格模式
         *  3.3 严格模式中的变化
     *  4 高阶函数
     *  5 闭包
     *  6 递归
     *   *  6.1 利用递归求1~n的阶乘
         *  6.2 利用递归求斐波那契数列
         *  6.3 利用递归遍历数据

# JavaScript高级之函数、严格模式、高阶函数、闭包与递归 #

## 1 函数的定义和调用 ##

### 1.1 函数的定义 ###

### 1.2 函数的调用 ###

/* 1. 普通函数 */
    function fn() { 
    	console.log('人生的巅峰');
    }
     fn(); 
    /* 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 的指向不同。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]

### 2.2 改变函数内部 this 指向 ###

#### 2.2.1 call方法 ####

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

#### 2.2.2 apply方法 ####

apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向；经常跟数组有关系。

控制台输出：  
![在这里插入图片描述][20200604111720673.JPG]

#### 2.2.3 bind方法 ####

bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数；不调用函数,但是还想改变this指向。

var o = { 
     name: 'andy'
     };
    
    function fn(a, b) { 
    	console.log(this);
    	console.log(a + b);
    };
    var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
    f();//调用新函数 this指向的是对象o 参数使用逗号隔开

#### 2.2.4 call、apply、bind三者的异同 ####

**共同点与不同点：**

*  共同点 : 都可以改变this指向
 *  不同点:
    
     *  call 和 apply 会调用函数, 并且改变函数内部this指向.
     *  call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
     *  bind 不会调用函数, 可以改变函数内部this指向.

**应用场景**：

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

## 3 严格模式 ##

### 3.1 严格模式介绍 ###

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

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

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

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

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

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

### 3.2 开启严格模式 ###

严格模式可以应用到整个脚本或个别函数中。

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

### 3.3 严格模式中的变化 ###

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

'use strict'
    num = 10 
    console.log(num)//严格模式后使用未声明的变量
    --------------------------------------------------------------------------------
    var num2 = 1;
    delete num2;//严格模式不允许删除变量
    --------------------------------------------------------------------------------
    function fn() { 
     console.log(this); // 严格模式下全局作用域中函数中的 this 是 undefined
    }
    fn();  
    ---------------------------------------------------------------------------------
    function Star() { 
    	 this.sex = '男';
    }
    // Star();严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错.
    var ldh = new Star();
    console.log(ldh.sex);
    ----------------------------------------------------------------------------------
    setTimeout(function() 
      console.log(this); //严格模式下，定时器 this 还是指向 window
    }, 2000);

[更多严格模式要求参考][Link 1]

## 4 高阶函数 ##

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。  
函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。

## 5 闭包 ##

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

function fn() { 
       var num = 10;
       function fun() { 
           console.log(num);
     	}
        return fun;
     }
    var f = fn();
    f();

思考题：哪个有闭包产生

## 6 递归 ##

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

**注意**：递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。

### 6.1 利用递归求1~n的阶乘 ###

//利用递归函数求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.2 利用递归求斐波那契数列 ###

// 利用递归函数求斐波那契数列(兔子序列) 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));

### 6.3 利用递归遍历数据 ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200604110430215.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[20200604111720673.JPG]: https://img-blog.csdnimg.cn/20200604111720673.JPG
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode