• 函数高阶(函数,改变函数this指向,高阶函数,闭包,递归)


    一、函数的定义方式

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

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

     3.new  Function( )

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

    • Function 里面参数都必须是字符串格式
    • 第三种方式执行效率低,也不方便书写,很少使用
    • 所有函数都是 Function 的实例(对象)
    • 函数也属于对象

    二、 函数的调用方式

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

     

    三、改变函数内部  this 的指向

     1.call 方法

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

      call() 方法主要作用可以实现继承

      语法:fun.call( 指向对象,参数1,参数2,...)

      2.apply 方法

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

      语法:fun.apply(thisArg,[argsArray])

    • thisArg:在 fun 函数运行时指定的 this 值
    • argsArray:传递的值,必须包含在数组里面
    • 返回值就是函数的返回值,因为他就是调用函数

      1. 也是调用函数,第二个可以改成函数内部的this指向

      2.但是它的参数必须是数组(伪数组)

      3.apply 的主要应用:利用 apply 借助数学内置对象求最大值(求数字中的最大值:Math.max();)

       例如:

       var arr = [1,55,33,22,4,7];

       Math.max.apply(null,arr); // 并没右指向对象,所以指向对象是 null,也可以写成Math

      3. bind 方法

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

      语法:fun.bind(thisArg,arg1,arg2,...)

    • thisArg:在 fun 函数运行时指定的 this 值
    • arg1,arg2:传递的其他参数
    • 返回由指定的 this 值和初始化参数改造的 原函数拷贝

      4. 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 指向。

    四、 严格模式

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

     严格模式分为:脚本严格模式 和 函数严格模式。

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

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

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

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

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

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

    五、 严格模式中的变化

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

     1、变量规定

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

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

     2、严格模式下 this 的指向问题

      1. 以前在全局作用于函数中的 this 指向 window 对象;严格模式下全局作用于中的 this 是 undefined。

      2. 以前构造函数不加 new 也可以调用,当普通函数, this 指向全局对象;严格模式下,如果构造函数不加 new 调用,this 会报错。

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

      4. 定时器 this 还是指向 window。

      5. 事件,对象还是指向调用者。

     3、函数变化

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

      2. 函数必须声明在顶层,新版本的 JavaScript 会引入 ”块级作用域“(ES6中已引入)。为了与新版本接轨,不允许在非函数的代码块内声明函数。

      更多严格模式要求参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

       

    六、 高阶函数

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

      <script>

       // 方式一

       function  fn (callback){

        callback  && callback();

       }

       fn( function(){ alert("hi") } );

       //  方式二

       function fn(){

        return function() { }

       }

       fn();

      </script>

      此时 fn 就是一个高阶函数

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

     七、闭包

     1、变量作用域

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

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

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

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

     2、什么是闭包

      闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解:一个作用域可以访问另外一个函数内部的局部变量。局部变量所在的这个函数被称为闭包函数。

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

      经典面试题:利用闭包的方式得到当前小 li 的索引号‘

      <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul>

      for( var i =0; i<lis.length;i++){

        // 利用 for 循环创建了 4 个立即执行函数

        // 立即执行函数也称为小闭包,因为立即执行函数里面的任何一个函数都可以使用它的 i 变量

        (function(i){

          lis[ i ].onclick = function(){

            console.log(i);

          }

         })( i );

      }

    八、递归

    1. 什么是递归?

     如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。

     简单理解:函数内部自己调用自己,这个函数就是递归函数。(递归函数的作用和循环效果一样) 

     注意:由于递归很容易发生 ”栈溢出“ 错误(stack overflow),所以必须要加退出条件 return。

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

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

    3.利用递归遍历数组

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            var 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) {
                var 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, 2));
            console.log(getID(data, 11));
            console.log(getID(data, 12));
            console.log(getID(data, 111));
        </script>
    </body>
    
    </html>

    4.浅拷贝和深拷贝

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

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

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

      target:拷贝给谁

      sources:要拷贝哪个

     5.使用递归的方式进行深拷贝

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
      </head>
    
      <body>
        <script>
          // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
          var obj = {
            id: 1,
            name: "andy",
            msg: {
              age: 18
            },
            color: ["pink", "red"]
          };
          var o = {};
          // 封装函数
          function deepCopy(o, obj) {
            for (var k in obj) {
              // 判断我们的属性值属于那种数据类型
              // 1. 获取属性值  oldobj[k]
              var item = obj[k];
              // 2. 判断这个值是否是数组
              if (item instanceof Array) {
                o[k] = [];
                deepCopy(o[k], item);
              } else if (item instanceof Object) {
                // 3. 判断这个值是否是对象
                o[k] = {};
                deepCopy(o[k], item);
              } else {
                // 4. 属于简单数据类型
                o[k] = item;
              }
            }
          }
          deepCopy(o, obj);
          console.log(o);
    
          var arr = [];
          console.log(arr instanceof Object);
          o.msg.age = 20;
          console.log(obj);
        </script>
      </body>
    </html>
  • 相关阅读:
    有效的括号
    数组
    复杂度分析
    技术派-epoll和IOCP之比较
    2020 University Rankings US News(美国)
    2020 University Rankings US News(亚洲)
    2020 University Rankings US News(中国)
    技术派-如果编译提示winnt.h(222):error C2146错误
    技术派-github常见的一些用法和缩写
    技术派-9个常用的代码托管平台
  • 原文地址:https://www.cnblogs.com/qtbb/p/11820269.html
Copyright © 2020-2023  润新知