JS simulation realizes the principles of call, apply, bind and new

Achieve one call function

call() Method uses a specified this Value and one or more parameters given separately to call a function .
The grammar and function of this method apply() The method is similar to , There is only one difference , Namely call() Method accepts a list of parameters , and apply() Method accepts an array of multiple parameters .

function.call(thisArg, arg1, arg2, …)

Function.prototype.call = function (context,...args) {
    
 let context = context ? context : window;
 let args = args ? args : [];
 let key = Symbol();
 context[key] = this;
 let res = context[key](...args);
 delete context[key];
 return res;
}

Achieve one apply function

apply() Method calls a given this The value of the function , And as an array （ Or something like an array object ） Provided parameters .

func.apply(thisArg, [argsArray])

Function.prototype.apply = function (context,args) {
    
 let context = context ? context : window;
 let args = args ? args : [];
 let key = Symbol();
 context[key] = this;
 let res = context[key](...args);
 delete context[key];
 return res;
}

Achieve one bind function

bind() Method creates a new function , stay bind() When called , Of this new function this Is specified as bind() The first parameter of , The rest of the parameters will be the parameters of the new function , For calling .

function.bind(thisArg[, arg1[, arg2[, …]]])

Function.prototype.bind = function (context,...args) {
    
  if(typeof this !== 'function'){
    
  	return new TypeError('must be function');
  }
  let _this=this;
  return function F(...newArgs){
    
  	if(this instanceof F){
    
		return new _this(...args,...newArgs);
	}
	return _this.apply(context,...args,...newArgs);
  }
}

Realization new function

new Operator to create an instance of a user-defined object type or a built-in object with a constructor .new The keyword will do the following ：

1. Create an empty simple JavaScript object （ namely {}）;
2. Link the object （ That is, set the constructor of the object ） To another object ;
3. Will step 1 The newly created object serves as this The context of ;
4. If the function does not return an object , Then return to this.

function create(fn,...args){
    //fn Yes. new Function of ,args It's a function parameter 
  //  Create an empty object obj, And then fn Prototype linked to obj On the prototype of 
  let obj = Object.create(fn.prototype);
  //  binding  this  Implementation inheritance ,obj  You can access the properties in the constructor 
  let res = fn.apply(obj,args);
  //  Object returned by constructor takes precedence ,object/array/function Priority return , For other types, return obj
  return res instanceof Object ? res : obj;
}