实现apply call 方法

最新推荐文章于 2023-04-20 08:59:27 发布

转载最新推荐文章于 2023-04-20 08:59:27 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bfdef2ee51d45513d682dcf

本文深入探讨了JavaScript中call与apply方法的实现原理，通过自定义myCall与myApply函数，详细解释了如何改变函数调用上下文及参数传递方式。

之前看过阿里大神冴羽的js深入系列，这只是学习后我自己总结学习，大神地址 github.com/mqyqingfeng…

call

   //实现一个call方法：
    Function.prototype.myCall = function(context) {
      //此处没有考虑context非object情况
      context.fn = this;
      let args = [];
      for(let i = 1, len = arguments.length; i < len; i++) {
           args.push(arguments[i]);
       }
      context.fn(...args);
      let result = context.fn(...args);
      delete context.fn;
      return result;
    }
    
    var value = 2;
    
    var obj = {
        value: 1
    }
    
    function bar(name, age) {
        return {
            value: this.value,
            name:name,
            age:age
        }
    }
    
    console.log(bar.call(null));
    
    console.log(bar.myCall(obj, 'dong', 18));
复制代码

apply

    /*
     实现一个apply方法：
     在浏览器运行，node环境下全局变量是global而非window；
     核心思路就是把函数作为要绑定对象的一个方法,然后执行函数，最后从绑定对象上删除此方法；
    */
    Function.prototype.myApply = function (context, arr){
      var context = Object(context) || window;
      //Object(context) 此处考虑调用函数的非object
      context.fn = this;
      // 首先要获取调用call的函数，用this可以获取
      let result;
      if(!arr){
        result = context.fn();
     }else{
       let args = [];
       arr.forEach((item) => {
         args.push(item)
       })
       context.fn(...args);
     }
      return result
      delete context.fn
    }
    
    var foo = {
        value: 1
    };
    
    function bar(name, age) {
        console.log(name)
        console.log(age)
        console.log(this.value);
    }
    
    bar.myApply(foo, ['dong', 18]);
复制代码