js 封装 call 函数

js中call,apply,bind是Function.prototype下的原型方法，也就是js中函数function天生就有call,apply,bind方法。都是用来改变函数执行过程中this的指向。或者直接说成是，以传入第一个参数（要指向对象）为指向来执行调用者函数的上下文。

    var value = 'this is window';
    var foo = {
       value : 'this is foo'
    }
    function bar(name,age){
       console.log(this.value);
    }
    bar.call(foo,'fly',31);  //this is foo
复制代码

那么上面的代码就是call 最基础的用法了，那看到这里会不会有人同样和我一样这样想，是不是代码可以变为：

    var foo = {
       value : 'this is foo',
       bar : function(){
          console.log(this.value);
       }
    }
    foo.bar();
复制代码

call函数在执行的过程中把this调整为传入对象，再执行一遍，那么自己封装一个：

    Function.prototype.call2 = function(obj){
        var obj = obj || window;
        var arr = [];
        obj.fn = this;
        for(var i = 1; i < arguments.length; i++){
                arr.push('arguments['+i+']');
        }
        var result = eval('obj.fn('+arr.join()+')');
        delete obj.fn;
        return result;
    }
    var value = 'this is window';
    var foo = {
        value : 'this is foo'
    }
    function bar(name,age){
        console.log(this.value);
    }
    bar.call2(foo,'fly',31);
复制代码

指向

这里如果参数为null 的话默认在浏览器中让他指向window。obj.fn 先给我们这个对象加一个属性来存调用者，这里this 就是调用者，所以obj.fn。

参数

默认是何以传递参数的，那么后面传进来的参数我们用一个临时数组存一下，循环arguments，从1开始是从第二个参数开始保存，因为第一个是obj。记住这里存完数组，arr=['argument[1]','argument[2]']。直接放到obj.fn()里面，就成了字符串了。所以我们用到了eval函数，他的作用就是可以把字符串以js语句执行。变为obj.fn(arguments[1], arguments[2], arguments[3])。执行的结果返回值存给临时变量result，返回出去，最后把obj.fn删除。

转载于:https://juejin.im/post/5ceb7fe6f265da1bbf68fb23