详解JS中关于call、apply和bind的实现（源码实现）

在JavaScript中，call、apply和bind是Function对象自带的三个方法，这三个方法的主要作用是改变函数中的this指向。

call、apply、bind方法的共同点：
1.都是用来改变函数的this对象的指向的；

2.第一个参数都是this要指向的对象；

3.可以利用后续参数传参；

区别：

bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

call()方法和apply()方法的作用相同，区别仅在于接受参数的方式不同。

一、call的源码实现

        //call源码实现
        function demo(){
            console.log(this);
            console.log(arguments);
        }
        var obj = {
            neme:"lcy",
            age:2
        }
        Function.prototype.myCall = function(){
            //找出第一个参数，判断第一个参数是否为空，如果为空this还是指向window
            var target = arguments[0] || window//短路运算
            //获取传递的参数
            var _arg  = Array.from(arguments).slice(1)
            target.fn = this;
            target.fn(..._arg);
            //删除fn属性
            delete target.fn;
        }
        demo.myCall(obj,1,2,3)
        // demo.call(obj,1,2,3);

二、apply的源码实现

         //apply源码实现
         function demo(){
            console.log(this);
            console.log(arguments);
        }
        var obj = {
            neme:"lcy",
            age:2
        }
        Function.prototype.myApply = function(){
            //找出第一个参数，判断第一个参数是否为空，如果为空this还是指向window
            var target = arguments[0] || window//短路运算
            //获取传递的参数
            var _arg  = arguments[1]
            target.fn = this;
            target.fn(..._arg);
            //删除fn属性
            delete target.fn;
        }
        demo.myApply(obj,[1,3,3])
        // demo.apply(obj,[1,2,3]);

三、bind的源码实现

       // bind源码实现
          function demo(){
            console.log(this);
            console.log(arguments);
        }
        var obj = {
            neme:"lcy",
            age:2
        }
        Function.prototype.myBind = function(){
            //记录函数的this指向
            var target = arguments[0] || window;
            //获取传递的参数
            var _args = Array.from(arguments).slice(1);
            //记录调用bind的函数
            var that = this;
            //返回一个新函数
            return function(){
                
                if(!new.target){
                    var arg = Array.from(arguments);
                    //拼接参数
                    arg = _args.concat(arg);
                    target.fn = that;
                    target.fn(...arg);    
                    delete target.fn;
                }else{
                    return new that();
                }
            }
        }

        var fn =  demo.myBind(obj,1,2);
        fn(3,4);

        // var fn1 = demo.bind(obj,1,2);
        // fn1(3,4)

这个记录下来为了方便以后使用的方便，也希望大佬们多多交流，多多留言，指出我的不足的之处啦！

有需要的小伙伴可以研究研究啦！！