手撕JavaScript call apply bind 函数
一、call apply bind 函数的基本用法
??首先这三个函数都是函数对象可用的三个方法，目的是为了改变调用者内部的 this 指向问题。下面简单介绍下他们的区别，详细内容可以看 其他文档 。
??例如我们定义如下 Person 函数：
function Person(){
console.log(this.name)
}
Person(); // undefined
Person.call(); // undefined
Person.apply(); // undefined
let fun = Person.bind();
fun(); // undefined
??我们就可以利用 Person 这个函数对象去调用 call、apply、bind 这三个方法，这是为什么呢？其实这几个方法都在 Function 构造函数的原型对象上，而我们定义的 Person 构造函数就是 Function 构造函数的实例对象，Person 的原型 ( _proto_ ) 就是指向 Function 的原型对象的，所以可以通过原型链找到这三个方法。
??这三个函数都可以用于改变调用者内部的 this 指向的，第一个参数就是用于设置内部 this 所指的对象，之后可以有多个参数都将作为调用者的参数。
function Person(arg1,arg2){
console.log(this.name+arg1+arg2);
}
let o = {
name:"Dog"
}
Person("Arg1","Arg2"); // undefinedArg1Arg2
Person.call(o,"Arg1","Arg2"); // DogArg1Arg2
Person.apply(o,["Arg1","Arg2"]); // DogArg1Arg2
let fun = Person.bind(o,"Arg1","Arg2");
fun(); // DogArg1Arg2
??从上述代码可以看出以下几点注意事项：
??call 和 apply 函数的调用会直接运行调用者函数，不同之处是他们传入参数的形式不一样，call 是将参数一个一个的传入，apply 是将参数放入数组中传入。
??bind 是暂时将调用者与要指定的 this 对象绑定在一起，但不执行调用者函数，可以暂时的保存这个绑定的函数，随后再执行。传参的形式与 call 一样。
??底层原理：
??为什么 Person.call(o) 就能将 Person 函数里的 this 指向 o 对象呢？其实这行代码相当于 o.Person()。即底层相当于在 o 对象中加入了一个 Person 方法。
function Person(){
console.log(this.name);
}
let o = {
name:"Dog"
}
Person.call(o); // 相当于下面的代码
o.Person = function(){
console.log(this.name);
};
o.Person();
/* 在调用 call 过程中 o 对象其实如下，之后 o 又恢复到原来的样子
o = {
name:"Dog",
Person:function(){
console.log(this.name);
}
}
*/
二、手写 myCall 方法
ES6 实现 myCall 方法
- 确定函数位置
??因为我们要实现的 myCall 方法也是每个函数对象都能调用的方法，所以也要把这个方法写在 Function 的原型对象上。
Function.prototype.myCall = function(){
}
- 确定函数参数
??在来考虑这个函数的参数，第一个参数是一个对象，用来修改调用者函数内部的 this 指向的对象，之后可以有多个参数，用于产给调用者函数作为参数的（这里可以用扩展操作符把第二个之后所有的参数都收集起来）。扩展操作符参考：10.6、参数扩展与收集
Function.prototype.myCall = function(obj,...args){
}
- 确定函数内部的 this 指向
??这时，我们要明白一个事情就是在 myCall 内部的 this 指向什么？
??在除了箭头函数中的所有函数中 this 永远指向它的调用者。那么在我们后面要调用 myCall 的语句中例如： Person.myCall(o) 可以知道，调用 myCall 的调用者就是一个函数 Person ，所以 myCall 函数内部的 this 就是指向这个 Person 调用者函数。
- 为对象内部添加调用者函数
??接下来要做的就是将这个函数添加到传入的对象内部，让该对象拥有这个方法，可以调用。
Function.prototype.myCall = function(obj,...args){
obj.fun = this;
}
??上述代码将调用 myCall 函数的调用者函数保存到了传入参数 obj 对象的内部 fun 属性（新建的属性）上，即现在的 obj 对象内部多了个 fun 方法，该方法名指向调用者函数。fun 这个属性名可以随便取，没有关系。
- 调用外部的调用者函数
??obj 对象有了调用者函数后，因为 myCall 函数是要直接执行调用者函数的，所以在 myCall 内部直接执行该函数，这里需要将 myCall 第二个之后的参数作为调用者函数的参数传入，我们再次利用扩展操作符将 myCall 收集到的参数 args 数组展开。
Function.prototype.myCall = function(obj,...args){
obj.fun = this;
obj.fun(...args);
}
- 删除内部的调用者函数，恢复原有结构
??执行完 fun 函数后，我们需要把这个属性给删除掉，不能改变了原 obj 对象的内部结构。
Function.prototype.myCall = function(obj,...args){
obj.fun = this;
obj.fun(...args);
delete obj.fun; // 删除添加的方法 fun
}
??到这里，我们就基本实现了类似于 call 功能的 myCall 函数。不过还有一些细节地方需要处理。
- 完善第一个参数问题
??问题一：就是当我们的第一个参数传入的是 null 时，我们自己写的 myCall 方法不能正常工作，而 call 可以。这时我们需要对参数 obj 进行一个处理。
Function.prototype.myCall = function(obj,...args){
obj = obj || window; // 当 obj 没传或传入 null 时，默认指向 window
obj.fun = this;
obj.fun(...args);
delete obj.fun;
}
- 完善返回值问题
??问题二：还有一个问题就是调用者函数的返回值问题，如下第一段代码，这个时候我们上面所写的 myCall 方法不能很好的返回调用者函数的返回值。原 call 可以。
function Person(arg1,arg2){
console.log(this.name+arg1+arg2);
return 123;
}
let o = {
name:"Dog"
}
Function.prototype.myCall = function(obj,...args){
obj = obj || window;
obj.fun = this;
obj.fun(...args);
delete obj.fun;
}
let res1 = Person.myCall(o,"Arg1","Arg2"); // DogArg1Arg2
console.log(res1); // undefined
let res2 = Person.call(o,"Arg1","Arg2"); // DogArg1Arg2
console.log(res2); // 123
- 完整版的 myCall 函数
??此时只需要将 myCall 内部调用外部调用者函数的结果保存并最终返回即可。如下第二段代码。
Function.prototype.myCall = function(obj,...args){
obj = obj || window;
obj.fun = this;
let res = obj.fun(...args); // 将调用者函数运行的结果保存
delete obj.fun;
return res; // 将调用者函数运行的结果返回
}
??上述代码就是 ES6 中最终的手写 myCall 方法。
ES5 实现 myCall 方法
??用 ES5 实现 myCall 的主要问题是不能用 ES6 中的扩展语法实现参数的传递。这时主要就是去解决参数的传递问题。这时 myCall 的参数我们可以用内置的 arguments 来接收。但是 myCall 的第一个是不需要作为内部调用者函数执行的参数的。
Function.prototype.myCall = function(obj){
obj = obj || window;
obj.fun = this;
// 将传入的第二个之后的参数要传入调用者函数，下行代码只是示例期望的样子，不符合语法的。
let res = obj.fun(arguments[1],arguments[2],...);
delete obj.fun;
return res; // 将调用者函数运行的结果返回
}
??当不使用 ES6 的扩展语法时，我们可以采用 eval 函数（能够解析 JavaScript 代码）。
??我们需要将执行调用者函数的语句写成字符串的形式作为 eval 函数的参数传入如下示例，需要解决的问题是如何将 fun 的参数动态的生成如下的形式。
eval("obj.fun(arguments[1],arguments[2],...)");
??这里可以新建一个数组，用来保存 myCall 传入的第二个及之后的所有参数。如下代码：
Function.prototype.myCall = function(obj){
obj = obj || window;
obj.fun = this;
const arrs = [];
for(let i = 1;i<arguments.length;i++){
arrs.push(arguments[i]);
}
}
?? 接下来需要将数组里的内容按, 分开插入eval 函数的相应位置即可。
- 完整版的 myCall 函数
Function.prototype.myCall = function(obj){
obj = obj || window;
obj.fun = this;
const arrs = [];
for(let i = 1;i<arguments.length;i++){
arrs.push("arguments["+ i +"]");
}
// 此时 arrs 就是：[arguments[1],arguments[2],...]
eval("obj.fun("+ arrs +")");
delete obj.fun;
return res; // 将调用者函数运行的结果返回
}
??这样我们 ES6 之前的手写 myCall 版本也就实现了。
??上述代码中要理解一个知识点就是。当把数组加一个空字符串打印时，就是把数组的所有元素以 , 逗号分割打印：
arr1 = [1,2,3,4];
console.log(arr1); // [1,2,3,4]
console.log(arr1+""); // 1,2,3,4
三、手写 myApply 方法
??有了前面 myCall 方法的分析过程和 call 与 apply 函数的细微区别，我们可以很容易改造出自己的 myApply 方法。
- ES6 之后版本
Function.prototype.myApply = function(obj,args){
obj = obj || window;
obj.fun = this;
let res = null;
if(!args){
res = obj.fun();
}else{
res = obj.fun(...args);
}
delete obj.fun;
return res; // 将调用者函数运行的结果返回
}
- ES6 之前版本
Function.prototype.myCall = function(obj,args){
obj = obj || window;
obj.fun = this;
const arrs = [];
let res = null;
if(!args){
res = obj.fun();
}else{
for(let i = 0;i<args.length;i++){
arrs.push("args["+ i +"]");
}
eval("obj.fun("+ arrs +")");
}
delete obj.fun;
return res; // 将调用者函数运行的结果返回
}
四、手写 myBind 方法
??bind 的不同之处是 bind 函数返回的是一个函数，而不执行调用者函数。第二是 bind 函数具有柯里化特性的即：参数可以在绑定 this 时传入一部分，在调用时再传入一部分。
function Person(a,b){
console.log(this.name+a+b);
}
const o = {
name:"Dog"
}
Person.bind(o,1)(2); // Dog12
??上述代码中第七行的 Person.bind(o,1) 是一个函数，如果没有后面的括号2 (2) 就不会调用，有了括号才调用的，并且参数是在绑定 this 时传入了 a 为 1，调用时传入来了 b 为 2。
??在写自己的 myBind 方法时，内部的 this 绑定同 myCall 和 myApply 一样，主要解决返回值和柯里化特性。myBind 要返回一个函数，所以基本结构如下：
Function.prototype.myBind = function(){
return function(){
}
}
??上述代码中要分析清楚两个地方的 this 指向问题：
Function.prototype.myBind = function(){
// 这里的 this 指向调用者函数
return function(){
// 这里的 this 指向 window
}
}
??弄清楚上面的两个位置的 this 指向后，最终 myBind 函数是要返回调用者函数（可能修改内部的this）的。所以我们要在 return 的函数外部把外部的调用者函数保存起来（如下第 2 行）。然后在 return 返回的函数内部使用（这里就形成了闭包）。当然这里也可以 return 一个箭头函数，那么箭头函数里面的 this 就是外部环境中的 this 了，即调用者函数。
??绑定时的参数传入保存在数组 args1 中，如下第4行。调用时的参数保存在 args2 中，如下第 8 行。返回的函数中可以直接调用 apply 函数，并将外部传入的 obj 和所有的参数传入即可。
Function.prototype.myBind = function(obj){
let that = this; // 1.保存外部的调用者函数
// 2. args1 以数组的形式保存绑定时传入的第二个之后的参数
let args1 = Array.prototype.slice.call(arguments,1);
let args2 = null; // 保存调用时传入的参数
return function(){
// 3. args2 以数组的形式保存调用时传入的参数
args2 = Array.prototype.slice.call(arguments);
// 4. 将 args1 和 args2 参数拼接后作为 apply 方法参数
that.apply(obj,args1.concat(args2));
}
}