JavaScript的callapplybind方法函数原生实现

call/apply/bind 方法简介

在 JavaScript 中，函数中 this 的指向往往在调用时才可确定，而 JavaScript 提供了 call/apply/bind 方法让我们得以显示绑定函数的 this 指向。
它们的第一个参数是一个对象，它们会把这个对象绑定到调用他们的函数内的 this。因为你可以直接指定 this 的绑定对象，因此我们称之为显式绑定。

// 用例
var a = {q: 1};
var b = {q: 2};
var c = {q: 3};
function cs(s) {console.log(this.q)
}
cs.bind(a)();//1
cs.call(b);//2
cs.apply(c);//3

tips

var s = new fn.myBind({a: 2333})();// 报错！！, 运算优先级：属性访问 > 带参 new> 函数调用 > 无参 new
var s = new (fn.myBind({ a: 2333}))();// 正确姿势

自定义 Call 方法实现

参数从 arguments[1] 开始，func.myCall(obj:Object[,agr1：any[,agr2:any[…]]])

if (!Function.prototype.myCall) {Function.prototype.myCall = function (targetThis) {//targetThis 默认为 windows( 严格模式不允许)
        targetThis = targetThis || window;
        // 利用对象调用指定 this
        targetThis.fn = this;
        // 收集参数
        var agrs = [];
        // 因为 arguments[0]===targetThis, 故从下标 1 开始
        for (var ge = 1, len = arguments.length; ge < len; ge++) {agrs.push('arguments[' + ge + ']');
        }
        // 利用 eval 展开参数 并执行函数
        var result = eval('targetThis.fn(' + agrs + ')');
        // 删除附加对象的属性以消除副作用
        delete targetThis.fn;
        // 返回结果
        return result;
    }
}

自定义 apply 方法实现

参数放在数组里 func.call(obj:Object[,agr:Array])

if (!Function.prototype.myApply) {Function.prototype.myApply = function (targetThis, arrAgrs) {//targetThis 默认为 windows( 严格模式不允许)
        targetThis = targetThis || window;
        // 利用对象调用指定 this
        targetThis.fn = this;
        var agrs = [];
        // 收集参数数组
        for (var ge = 0, len = arrAgrs.length; ge < len; ge++) {agrs.push('arrAgrs[' + ge + ']');
        }
        // 利用 eval 展开参数 并执行函数
        var result = eval('targetThis.fn(' + agrs + ')');
        // 删除附加对象的属性以消除副作用
        delete targetThis.fn;
        // 返回结果
        return result;
    }
}

自定义 bind 方法实现

参数从 arguments[1] 开始，func.myCall(obj:Object[,agr1：any[,agr2:any[…]]])

// 考虑参数合并以及 new 优先级和原型继承
if (!Function.prototype.myBind) {Function.prototype.myBind = function (targetThis) {
        // 若非函数对象来调用本方法，报异常
        if (typeof this !== "function") {
            throw new TypeError("Function.prototype.bind error");
        }
        // 收集参数
        var bindArgs = Array.prototype.slice.call(arguments, 1),
            originFunction = this,// 保存原始 this(原始函数)
            fnProto = function () {},// 利用空函数间接链接 prototype 以应对 new 时的原型继承
            fnBounding = function () {
                // 考核 new 操作 this 绑定优先
                return originFunction.apply(
                    (this instanceof fnProto ? this : targetThis),
                    bindArgs.concat(Array.prototype.slice.call(arguments)
                    )
                )
            };
        fnProto.prototype = this.prototype;// 链接原型
        //new 一个 fnProto 以实现简洁继承原型，防止对 fnBounding.prototype 的操作污染 originFunction 原型 prototype
        fnBounding.prototype = new fnProto();
        return fnBounding;
    };
}

软绑定

bind 之后可以再 bind 或 call/apply

if (!Function.prototype.softBind) {Function.prototype.softBind = function (obj) {
        var fn = this;
        // 捕获所有 curried 参数
        var curried = [].slice.call(arguments, 1);
        var bound = function () {
            return fn.apply((!this || this === (window || global)) ?
                    obj : this,
                curried.concat.apply(curried, arguments)
            );
        };
        bound.prototype = Object.create(fn.prototype);// 链接原型
        return bound;
    };
}