Explain in detail the implementation of call, apply and bind in JS (source code implementation)

stay JavaScript in ,call、apply and bind yes Function Object comes with three methods , The main purpose of these three methods is to change the this Point to .

call、apply、bind Common ground of methods ：
1. It's all about changing functions this Object's pointing to ;

2. The first parameter is this Object to point to ;

3. You can use subsequent parameters to transfer parameters ;

difference ：

bind Yes returns the corresponding function , Easy to call later ;apply 、call Call immediately .

call() Methods and apply() The method works the same , The only difference is the way parameters are accepted .

One 、call Source code implementation

        //call The source code to achieve 
        function demo(){
            console.log(this);
            console.log(arguments);
        }
        var obj = {
            neme:"lcy",
            age:2
        }
        Function.prototype.myCall = function(){
            // Find the first parameter , Determine whether the first parameter is empty , If it is empty this Or point to window
            var target = arguments[0] || window// Short-circuit operation 
            // Get the parameters passed 
            var _arg  = Array.from(arguments).slice(1)
            target.fn = this;
            target.fn(..._arg);
            // Delete fn attribute 
            delete target.fn;
        }
        demo.myCall(obj,1,2,3)
        // demo.call(obj,1,2,3);

Two 、apply Source code implementation

         //apply The source code to achieve 
         function demo(){
            console.log(this);
            console.log(arguments);
        }
        var obj = {
            neme:"lcy",
            age:2
        }
        Function.prototype.myApply = function(){
            // Find the first parameter , Determine whether the first parameter is empty , If it is empty this Or point to window
            var target = arguments[0] || window// Short-circuit operation 
            // Get the parameters passed 
            var _arg  = arguments[1]
            target.fn = this;
            target.fn(..._arg);
            // Delete fn attribute 
            delete target.fn;
        }
        demo.myApply(obj,[1,3,3])
        // demo.apply(obj,[1,2,3]);

3、 ... and 、bind Source code implementation

       // bind The source code to achieve 
          function demo(){
            console.log(this);
            console.log(arguments);
        }
        var obj = {
            neme:"lcy",
            age:2
        }
        Function.prototype.myBind = function(){
            // Record function's this Point to 
            var target = arguments[0] || window;
            // Get the parameters passed 
            var _args = Array.from(arguments).slice(1);
            // Record calls bind Function of 
            var that = this;
            // Returns a new function 
            return function(){
                
                if(!new.target){
                    var arg = Array.from(arguments);
                    // Splicing parameter 
                    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)

This is recorded for future use , I also hope the big guys can communicate more , Leave more messages , Point out my shortcomings ！

You can study it if you need it ！！