简单实现call()/apply()

在实现之前，有必要弄清楚call()/apply()的定义：

call():

使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

apply() ：

调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。

相同点：指定this值(第一个参数)来执行一个函数，并且可以传参
不同点：call()是单独传参，apply()是以数组形式传参

通过上面两者的定义，我们知道传参的处理相对简单，难点在于如何指定this值。

接下来看一下this指向规格：this指向最终执行调用他的对象

eg: fn.call(content, ...args)

使用上面这个例子分析，在目标this值的函数(content)中，调用fn就可以让fn的this指向content。

上代码

Function.prototype.myCall = function (content, ...args) {
	//content.fn的方式调用this, 使得函数的this指向content
    content.fn = this;
    return content.fn(...args);
}

测试一下

var module = {
	x: 42,
	getSite: function(y, z) {
	console.log('this---', this);
		return `${this.x},${y},${z}`;
	}
};

var getSiteCopy = module.getSite;
console.log(getSiteCopy.myCall(module, 142, 21)); // 42,142,21

appy()跟call()的不同点在于，apply()是以数组传参。
所以只需要将以上代码稍作修改：

Function.prototype.myApply = function (content, args) {
    content.fn = this;
    return content.fn(...args);
}

测试一下

var module = {
  x: 42,
  getSite: function(y, z) {
 console.log('this---', this);
    return `${this.x},${y},${z}`;
  }
};

var getSiteCopy = module.getSite;
console.log(getSiteCopy.myApply(module, [142, 21])); // 42,142,21

ps：转载请注明出处