• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

原生js如何实现call,apply以及bind

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1、实现call

步骤:

  1. 将函数设为对象的属性;
  2. 指定this到函数,并传入给定参数执行函数;
  3. 执行之后删除这个函数;
  4. 如果不传入参数,默认指向window;
Function.prototype.mycall = function (context, ...args) {
    //判断是否为函数,如果不是函数,则报错
    if (typeof this !== "function") {
        throw new Error("不是函数");
    }
    context = context || window;
    context.fn = this;
    const res = context.fn(...args);
    delete context.fn;
    return res;
}

  测试代码:

var name = "李辉", age = 25;
var obj = {
    name: "周果",
    objAge: this.age,
    myFun: function (fm, to) {
        console.log(`名字:${this.name},年龄:${this.age},来自:${fm},去往:${to}`)
    }
};
var person = {
    name: "弟弟",
    age: 12,
};

Function.prototype.mycall = function (context, ...args) {
    //判断是否为函数,如果不是函数,则报错
    if (typeof this !== "function") {
        throw new Error("不是函数");
    }
    context = context || window;
    context.fn = this;
    const res = context.fn(...args);
    delete context.fn;
    return res;
}

obj.myFun.mycall(person, "成都", "仁寿"); //名字:弟弟,年龄:12,来自:成都,去往:仁寿

2、实现apply

Function.prototype.myApply = function (context, ...args) {
    //判断是否为函数,如果不是函数,则报错
    if (typeof this !== "function") {
        throw new Error("不是函数");
    }
    context = context || window;
    context.fn = this;
    args = args && args[0] || [];
    const result = context.fn(...args);
    delete context.fn;
    return result;
}

  测试代码:

obj.myFun.myApply(person, ["成都", "仁寿"]); //名字:弟弟,年龄:12,来自:成都,去往:仁寿

3、实现bind

  bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值。

  方法1:使用apply

Function.prototype.myBind = function () {
    let self = this; //保存原函数
    let context = [].shift.call(arguments); //保存需要绑定的this上下文
    let args = [...arguments]; //将传入的剩余参数转换成数组
    return function () {                 //返回一个新的函数
        self.apply(context,[].concat.call(args,[...arguments]));
    }
}

  ES6简化一下:

Function.prototype.myBind = function (context, ...args1) {
        return (...args2) => {  //返回箭头函数, this绑定调用这个方法的函数对象
            context = context || window;
            return this.apply(context, args1.concat(args2));//合并参数
        }
    }

  方法2:不使用call以及apply

  将上面的代码和js手写实现apply的代码合并一下:

Function.prototype.myBind = function (context, ...args1) {
    return (...args2) => {  //返回箭头函数, this绑定调用这个方法的函数对象
        context = context || window;
        context.fn = this;
        const args = args1.concat(args2);
        const res = context.fn(...args);
        delete context.fn;
        return res;
    }
}

  测试代码:

obj.myFun.myBind(person, "成都", "仁寿")();//名字:弟弟,年龄:12,来自:成都,去往:仁寿

以上就是原生js如何实现call,apply以及bind的详细内容,更多关于js实现call,apply以及bind的资料请关注极客世界其它相关文章!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue项目实现图形验证码发布时间:2022-02-05
下一篇:
vue实现图形验证码发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap