Handwritten code call, apply, bind

---

One 、call and apply What is it? ？

call and apply It's all about change this The direction of . The effect is the same , It's just that the way to pass the parameters is different .
Except for the first parameter ,call You can receive a list of parameters ,apply Accept only one parameter array

Two 、 Handwriting call Code and comments ~

 //1, call Simple application 
            // var foo={
    
            // value:'1'
            // }
            // function bar(){
    
            // console.log(this.value);
            // }
            // bar.call(foo)

            //2, take bar Function mounted to foo On the object , Make it a foo Methods 
            // var foo={
    
            // value:1,
            // 
            // bar:function(){
    
            // console.log(this.value);
            // }
            // };
            // foo.bar()
            //3, simulation call Method can make a function an attribute of an object , Use this function by calling the properties of the object 
         Function.prototype.mycall=function(context){
    
               const fn =Symbol('fn');
               context=context||window//context yes {e:3}
               context.fn=this
            // console.log(this);// there this yes g function , hold g Function bound to context{e:3} On 
               const args=[...arguments].slice('1')// Separate the following parameters 
               const result=context.fn(...args)
               delete context.fn// Delete context.fn attribute 
               return result

         }
         function g(a,b){
    
               console.log(a,b);
               console.log(this.e);

         }
         g.mycall({
    e:3},1,2)

3、 ... and 、 Handwriting apply Code and comments

   Function.prototype.mycall=function(context){
    
               const fn =Symbol('fn');
               context=context||window//context yes {e:3}
               context.fn=this
            // console.log(this);// there this yes g function , hold g Function bound to context{e:3} On 
               const args=[...arguments].slice(1)// Separate the following parameters 
            // console.log(args);
               const result=context.fn(args)//apply and call The difference is here ,apply What is passed is an array 
               delete context.fn// Delete context.fn attribute 
               return result

         }
         function g(a){
    
               console.log(a);// The output here is also an array 
               console.log(this.e);

         }
         g.mycall({
    e:3},[1,2])

3、 ... and 、 Handwriting bind Code and comments

bind It returns a function

  //1, Simple application 
      // var bar={
    
      // a:1
      // }
      // function b(){
    
      // console.log(this.a);
      // }
      // b.bind(bar)() 
 //2, Handwriting 
      // Write one first call
      Function.prototype.mycall=function(context){
    
           const fn=Symbol('fn')
           context=context||window
           context.fn=this
           const args=[...arguments].slice(1)
           const result=context.fn(...args)
           delete context.fn
           return result
      }
      Function.prototype.mybind=function (context){
    
            // This returns a function , The arrow function guarantees this The direction is Function
            return ()=>{
    
                   return this.mycall(context)
            }
      }
      var obj={
    a:1};
      function bar(){
    
            console.log(this.a);
      }
      bar.mybind(obj)()