当前位置:网站首页>Manually implement call, apply and bind functions

Manually implement call, apply and bind functions

2022-04-23 17:14:00 MiMenge

Realization call

Function.prototype.myCall = function (targetObj, ...resule) {
    

   //  Judge whether the incoming object exists 
  targetObj = targetObj || window;
 
   //  Hang on to the incoming object this Point to , here this To call myCall function 
  targetObj.fn = this;
    

    //  Call... Internally using an incoming object fn Method , This enables changes this Point to , Point to the target object that is passed in 
  let value = eval('targetObj.fn(...resule)');

   //  Delete target object fn Method 
  delete targetObj.fn

   //  Returns the result of the call 
  return value;
}

let obj = {
    
    uname: 'Tom'
}

function demo(a, b){
    
    console.log(this.uname, a, b);
}

demo();// undefined undefined undefined

demo.myCall(obj, 1, 2);
// Tom 1 2

Realization apply ( Subject and call almost , Different ways of passing in parameters )

Function.prototype.myApply = function (targetObj, resule) {
    

  targetObj = targetObj || window;

  targetObj.fn = this;

  let value = eval('targetObj.fn(...resule)');

  delete targetObj.fn

  return value;
}

let obj = {
    
    uname: 'Tom'
}

function demo(x, y){
    
    console.log(this.uname, x, y);
}

demo();// undefined undefined undefined

demo.myApply(obj, [1, 2]);
// Tom 1 2

Realization bind

Function.prototype.myBind = function (targetObj, ...resule) {
    
    
    //  Determine whether the called object is a function 
    if (typeof this !== "function") {
    
      throw new Error("this must be a function");
    }
    
    //  Create variables to save this Point to 
    //  here this Point to the function called externally 
    let self = this;
    
    //  The function to be created returns 
    let backFunc = function () {
    
       //  First determine the of the calling object this Whether it is the same as this function this
       //  Yes, change this Point to yourself ,( In fact, the last thing to return is this A function that points to itself )
       //  If not, change the caller this Point to the incoming object , Pass the parameter to the calling this in .
 			self.apply(this instanceof self ? 
            this : targetObj, resule.concat(Array.prototype.slice.call(arguments)));
    }
    
    //  Judge whether the call has a prototype 
    if(this.prototype) {
    
     //  If so, assign the prototype to the returned function 
      backFunc.prototype = Object.create(this.prototype);
    }
    //  Return function 
    return backFunc;
}

let obj = {
    
    uname: 'Tom'
}

function demo(x, y){
    
    console.log(this.uname, x, y);
}

demo();// undefined undefined undefined

demo.myBind(obj, 1, 2)();
// Tom 1 2

版权声明
本文为[MiMenge]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230553027792.html