手写JavaScript的call、apply、bind函数

一.call、apply、bind函数介绍

在多数编程语言中都有this关键字，这个关键字 一般指向的是某个对象，比如说在JavaScript中this一般是在函数调用时，指向最后调用这个函数的对象。如果是在非严格模式下，直接执行函数，则指向我们的全局对象，比如说window。要记住，这个this一定是的在函数调用执行的时候生成的。对于每一个对象都有它的属性以及方法，比如说一个数组arr，arr实例对象可以通过原型链使用到它原型上的方法,而其他不是数组类型的则不能直接使用arr的一些方法，比如说类数组。然后在有些时候我们某个对象可能需要使用另一个对象的方法，这个时候我们就可以改变this的指向，将这个方法的调用者换成我们需要使用这个方法的对象。在JavaScript中我们可以使用call、apply、bind方法。

二.call、apply、bind函数的区别

我们先通过一个例子来观察这三个函数的区别

1. call的使用

Array.prototype.slice.call(obj,a,b,c,d)

2. apply的使用

Array.prototype.apply(obj,[a,b,c,d])

3. bind的使用

let fn = Array.prototype.slice.bind(obj,a,b,c,d)
fn()

从上面三个例子不难看出，主要的区别是传递的参数，以及返回值得区别，首先第一个参数都是需要更改的this对象，第二个参数call和bind传递的是多个形参，只有apply传递的是由多个参数组成的数组。而bind返回的是一个更改了this指向的一个函数。

三.简单模拟call、apply、bind函数

当我们清楚了这三个函数的作用以及它们之间的区别后，我们就可以对这三个函数进行实现了。

//call函数实现
//首先我们需要定义一个形参content接收我们需要更改的this对象
Function.prototype.myCall = function(content) {
	content = content || window;
	//因为call传递的是多个连续的参数，所以使用arguments来获取参数
	let args = [...arguments].slice(1)
	//改变this指向
	content.fn = this;
	//最后执行该函数，并且将我们接收到的参数传递进去
	return content.fn(...args)
}
//apply函数实现
Function.prototype.myApply = function(content) {
	content = content || window;
	//因为apply传递的就是一个数组，所以这里不需要像call那样将参数转换成数组
	let args = arguments[1];
	content.fn = this;
	return content.fn(...args);
}
//bind函数实现
Function.prototype.myBind = function(content) {
	content = content || window;
	let args = [...arguments].slice(1);
	content.fn = this;
	//在这里我们需要返回一个函数，然后由返回的函数进行调用执行
	return function() {
		content.fn(...args)
	}
}

好啦，关于这三个函数的介绍以及实现就介绍到这里，然后我也是初学者，也是第一次写博文。如果有哪些地方有误，欢迎指正