自定义函数的apply方法

快来打我* 2022-12-05 04:53 67阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
      <script>
        /* 介绍: apply是函数上面的一个方法,主要用于修改this指向的 语法: fn.apply(this,[arr]) */
    
        function fn() { 
          console.log(this)
          console.log(arguments)
          return 1
        }
        const obj = { 
          name: 'zcf',
          age: 22
        }
        // fn(1, 2, 3)// window Arguments[1,2,3]
        // fn.apply(obj, [1, 2, 3]) // {name: "zcf", age: 22} Arguments[1,2,3]
        /* 下面咱们来实现它,既然是函数上面的方法，所有函数都可以使用这个方法，那么我们可以定义在函数的显示原型上面 */
        Function.prototype.apply = function (that, arr) { 
          /* that代表要修改的this指向 arr内部代表传进来的参数 */
          // 判断arr是否为一个数组，如果不是一个数组，抛错
          if (!(arr instanceof Array)) throw new Error('apply[1]必须为一个Array')
          // 想修改this指向，只需要that.fn()，那么fn这个函数内部的this指向就变成了that
          // 这里添加到隐式原型上是为了让它不可见
          // 构造函数内部this ==> 实例化对象fn
          // 在传进来的obj中新添加了一个_fn,值为一个函数(实例对象)
          that.__proto__._fn = this
          // 调用这个函数，把参数传递给函数fn,并且得到原函数内部的返回值作为调用apply函数的返回值
          const result = that._fn(...arr)
          // 删除obj隐式原型上的函数fn
          delete that.__proto__._fn
          // 把函数的返回值return出去
          return result
        }
        const res = fn.apply(obj, [1, 2, 3])
        console.log(res)
    
    
      </script>
    </body>
    
    </html>