美文网首页
JavaScript深入之call和apply的模拟实现

JavaScript深入之call和apply的模拟实现

作者: __越过山丘__ | 来源:发表于2018-11-21 15:21 被阅读0次

    原文:https://github.com/mqyqingfeng/Blog/issues/11

    var foo = {
        value: 1
    };
    
    function bar() {
        console.log(this.value);
    }
    
    bar.call(foo); // 1
    

    call的模拟实现

    Function.prototype.call2 = function (context) {
        var context = context || window;
        context.fn = this;
    
        var args = [];
        for(var i = 1, len = arguments.length; i < len; i++) {
            args.push('arguments[' + i + ']');
        }
    
        var result = eval('context.fn(' + args +')');
    
        delete context.fn
        return result;
    }
    
    // 测试一下
    var value = 2;
    
    var obj = {
        value: 1
    }
    
    function bar(name, age) {
        console.log(this.value);
        return {
            value: this.value,
            name: name,
            age: age
        }
    }
    
    bar.call2(null); // 2
    
    console.log(bar.call2(obj, 'kevin', 18));
    // 1
    // Object {
    //    value: 1,
    //    name: 'kevin',
    //    age: 18
    // }
    

    apply的模拟实现

    Function.prototype.apply = function (context, arr) {
        var context = Object(context) || window;
        context.fn = this;
    
        var result;
        if (!arr) {
            result = context.fn();
        }
        else {
            var args = [];
            for (var i = 0, len = arr.length; i < len; i++) {
                args.push('arr[' + i + ']');
            }
            result = eval('context.fn(' + args + ')')
        }
    
        delete context.fn
        return result;
    }
    

    相关文章

      网友评论

          本文标题:JavaScript深入之call和apply的模拟实现

          本文链接:https://www.haomeiwen.com/subject/uydcqqtx.html