Js模拟实现call、apply、bind、new原理

文章目录

实现一个call函数

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

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;
}

实现一个apply函数

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

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;
}

实现一个bind函数

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

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);
  }
}

实现new功能

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作：

创建一个空的简单JavaScript对象（即{}）；
链接该对象（即设置该对象的构造函数）到另一个对象；
将步骤1新创建的对象作为this的上下文；
如果该函数没有返回对象，则返回this。

function create(fn,...args){//fn是要new的函数，args是函数的参数
  // 创建一个空对象obj，然后将fn的原型链接到obj的原型上
  let obj = Object.create(fn.prototype);
  // 绑定 this 实现继承，obj 可以访问到构造函数中的属性
  let res = fn.apply(obj,args);
  // 优先返回构造函数返回的对象,object/array/function优先返回，如果是其他类型则返回obj
  return res instanceof Object ? res : obj;
}