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

更新时间：2021年04月27日 10:58:09 作者：guo&qi

这篇文章主要介绍了原生js实现call,apply以及bind，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下

1、实现call

步骤：

将函数设为对象的属性；
指定this到函数，并传入给定参数执行函数；
执行之后删除这个函数；
如果不传入参数，默认指向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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Js-$.extend扩展方法使方法参数更灵活
在ＪＳ里，我们的方法参数通常使用JQ的$.extend扩展方法来实现,感兴趣的朋友可以了解下
2013-01-01
JavaScript中的函数申明、函数表达式、箭头函数
js中的函数可以通过几种方式创建，具体创建方法通过实例代码给大家介绍的非常详细，文中通过例子给大家介绍了函数声明和表达式之间的差别，感兴趣的朋友跟随小编一起看看吧
2019-12-12
javascript日期格式化方法汇总
本文给大家汇总介绍了javascript格式化日期时间的几种常用方法，个人对最后一种个性化输出时间比较有兴趣，基本上只要项目中能用到都是使用这种，推荐给小伙伴们。
2015-10-10
JavaScript程序设计之JS调试
这篇文章主要介绍了JavaScript程序设计中的重要环节：JS调试，本文通过一个加法器，介绍JS如何调试，感兴趣的小伙伴们可以参考一下
2015-12-12
javascript实现数字倒计时特效
这篇文章主要介绍了javascript实现网页倒计时数字时钟效果，是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下
2016-03-03
JavaScript获取图片像素颜色并转换为box-shadow显示
这篇文章主要介绍了JavaScript获取图片像素颜色并转换为box-shadow显示的方法,用到了HTML5中的FileReader API和getImageData,转换为的CSS3 box-shadow也要注意浏览器的兼容问题,需要的朋友可以参考下
2016-03-03
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
这篇文章主要介绍了JS赋值、浅拷贝和深拷贝,结合实例形式总结分析了JavaScript数组和对象的深浅拷贝相关概念、原理、操作技巧与使用注意事项,需要的朋友可以参考下
2020-03-03
webpack该如何打包(打包流程)
这篇文章主要介绍了webpack该如何打包及打包流程,本文通过图文示例相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2023-12-12
JavaScript是如何实现继承的(六种方式)
大多OO语言都支持两种继承方式：接口继承和实现继承，而ECMAScript中无法实现接口继承，ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现，下文给大家技术js实现继承的六种方式，需要的朋友参考下
2016-03-03
怎样在CocosCreator中使用游戏手柄
这篇文章主要介绍了怎样使用CocosCreator的游戏手柄，每一个步骤都挺详细，资源可以随便找一些，希望同学们看完，一定要试一下
2021-04-04