【代码人生】深入理解借用函数原理-小案例

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

借用函数原理 :  利用要使用方法的原型调用这个方法,再用call改变方法的this指向 (指向真正要使用这个方法的对象)

案例 1

需求 : 伪数组转真数组 ： 希望伪数组也可以调用数组的方法

伪数组 ： 有数组三要素（元素，下标，长度），但是没有数组的方法

* 伪数组本质是 对象 . 它的原型指向的是Object的原型，所以无法调用数组原型中的方法

代码 :

     let obj = {
        0: 88,
        1: 90,
        2: 100,
        3: 66,
        4: 50,
        length: 5
      }

      /* 方式一：声明一个空数组， 遍历伪数组将元素添加到数组中 */
      //   let arr = []
      //   for (let i = 0; i < obj.length; i++) {
      //     arr.push(obj[i])
      //   }
      //   console.log(arr)

      /* 方式二：利用push方法可以传递多个参数的特点 */
      let arr = []
      arr.push.apply(arr,obj)
      console.log(arr)

思路解析 :

1. 定义一个空数组 arr
2. 用 arr 调用数组方法 push()
3. 利用 push() 方法可以传递多个参数的特点,再用 apply() 方法改变 this 指向伪数组 obj
4. 最后得到一个新的真数组

案例 2

需求 : 对伪数组排序

代码 :

      let obj = {
        0: 88,
        1: 90,
        2: 100,
        3: 66,
        4: 50,
        length: 5
      }
      // 使用Array.prototype来调用sort,但是把sort里面的this修改为伪数组obj
       Array.prototype.sort.call(obj, function (a, b) {
          return a - b
        })

        console.log(obj)

思路解析 :

1.排序： 数组的sort()方法
2.报错： 因为伪数组原型指向Object而不是Array，所以无法调用数组的sort
   解决方案： 先把伪数组转成真数组，然后调用sort
3.原因： 伪数组原型指向Object，无法调用Array.prototype里面的sort
4.思考： Array原型中的sort谁可以调用
   (1)arr实例对象可以直接使用Array原型中的成员
   (2)构造函数.prototype : Array.prototype.sort()
5.最后一个问题
  如果是 arr.sort()               :  this指向arr
  如果是 Array.prototype.sort()   :  this指向Array.prototype
6.最终解决方案： 使用Array.prototype来调用sort,但是把sort里面的this修改为伪数组obj

案例 3

需求 : 求数组最大值

代码:

   /* 求数组最大值 */

      let arr = [100, 20, 60, 88, 90]

      //方式一：擂台思想
      let max = -Infinity
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] > max) {
          max = arr[i]
        }
      }
      console.log(max)

      //方式二： Math.max()
      let max1 = Math.max.apply(Math,arr)
      console.log(max1)

思路解析 :

1. JavaScript 内置对象 Math 有一个 max() 方法,可以找到一组数字之中的最大值
2. 用 Math 对象调用 max() 方法,再用 apply() 方法改变 this 指向为数组 arr