前端JavaScript之手写实现:apply,call,bind

三者都是改变函数的this指向,apply与call则是传递参数形式不同;apply和call是立即执行函数,bind则是需要调用执行。

    Function.prototype.myApply = function (context) {
        // 判断this是不是函数
        if (typeof this != 'function') {
            throw new TypeError("Not a Function");
        }
        // 函数执行的结果
        let result;
        // 传递的指向(实例对象)是否为空,为空默认window
        context = context || window;
        // 将当前方法保存为新的对象实例的方法
        context.fn = this;

        if (arguments[1]) {
            result = context.fn(...arguments[1]);
        } else {
            result = context.fn();
        }
        // 结束调用完之后删除实例对象的方法
        delete context.fn;
        // 返回函数执行结果
        return result;
    }

    Function.prototype.myCall = function (context) {
        // 判断this是否为函数
        if (typeof this != 'function') {
            throw new TypeError('Not a function');
        }
        // 函数执行结果
        let result;
        // 传递的指向(实例对象)是否为空,为空默认window
        context = context || window;
        // 保存当前方法为新的(指向)对象实例的方法
        context.fn = this;

        // 将参数列表转为参数数组,slice(1)去掉参数列表中的第一个传递指向的参数
        let args = Array.from(arguments).slice(1);

        result = context.fn(...args);

        // 结束调用完之后删除实例对象的方法
        delete context.fn;
        // 返回函数执行结果
        return result;
    }

    Function.prototype.myBind = function (context) {
        // 判断this是否为函数
        if (typeof this != 'function') {
            throw new TypeError('Not a function');
        }
        // 保存调用bind的函数
        const _this = this;
        // 保存参数
        const args = Array.prototype.slice.call(arguments, 1);
        return function F() {
            if (this instanceof F) {
                // 如果是new出来的
                // 返回一个空对象,且使创建出来的实例的__proto__指向_this的prototype,且完成函数柯里化
                return _this(...args, ...arguments);
            } else {
                // 如果不是new出来的改变this指向,且完成函数柯里化
                return _this.apply(context, args.concat(...arguments))
            }
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值