js 实现call和apply方法，超详细思路分析
壹 ❀ 引
我在 五种绑定策略彻底弄懂this 一文中，我们提到call，apply，bind属于显示绑定，这三个方法都能直接修改this指向。其中call与apply比较特殊，它们在修改this的同时还会直接执行方法，而bind只是返回一个修改完this的boundFunction并未执行，那么今天我们来讲讲如果通过JavaScript模拟实现call与apply方法。
贰 ❀ 关于call与apply
贰 ✿ 壹 call与apply区别
除了都能改变this指向并执行函数，call与apply唯一区别在于参数不同，具体如下：
var fn = function (arg1, arg2) {
// do something
};
fn.call(this, arg1, arg2); // 参数散列
fn.apply(this, [arg1, arg2]) // 参数使用数组包裹
call第一参数为this指向，后续散列参数均为函数调用所需形参，而在apply中这些参数被包裹在一个数组中。
贰 ✿ 贰 使用场景
call与apply在日常开发中非常实用，我们在此列举几个实用的例子。
检验数据类型：
function type(obj) {
var regexp = /\s(\w+)\]/;
var result = regexp.exec(Object.prototype.toString.call(obj))[1];
return result;
};
console.log(type([123]));//Array
console.log(type('123'));//String
console.log(type(123));//Number
console.log(type(null));//Null
console.log(type(undefined));//Undefined
数组取最大/小值：
var arr = [11, 1, 0, 2, 3, 5];
// 取最大
var max1 = Math.max.call(null, ...arr);
var max2 = Math.max.apply(null, arr);
// 取最小
var min1 = Math.min.call(null, ...arr);
var min2 = Math.min.apply(null, arr);
console.log(max1); //11
console.log(max2); //11
console.log(min1); //0
console.log(min2); //0
函数arguments类数组操作：
var fn = function () {
var arr = Array.prototype.slice.call(arguments);
console.log(arr); //[1, 2, 3, 4]
};
fn(1, 2, 3, 4);
关于这两个方法实用简单说到这里，毕竟本文的核心主旨是手动实现call与apply方法，我们接着说。
叁 ❀ 实现一个call方法
我们从一个简单的例子解析call方法
var name = '时间跳跃';
var obj = {
name: '听风是风'
};
function fn() {
console.log(this.name);
};
fn(); //时间跳跃
fn.call(obj); //听风是风
在这个例子中，call方法主要做了两件事：
- 修改了
this指向，比如fn()默认指向window，所以输出时间跳跃 - 执行了函数
fn
叁 ✿ 壹 改变this并执行方法
先说第一步改变this怎么实现，其实很简单，只要将方法fn添加成对象obj的属性不就好了。所以我们可以这样：
//模拟call方法
Function.prototype.call_ = function (obj) {
obj.fn = this; // 此时this就是函数fn
obj.fn(); // 执行fn
delete obj.fn; //删除fn
};
fn.call_(obj); // 听风是风
注意，这里的call_是我们模拟的call方法，我们来解释模拟方法中做了什么。
- 我们通过
Function.prototype.call_的形式绑定了call_方法，所以所有函数都可以直接访问call_。 fn.call_属于this隐式绑定，所以在执行时call_时内部this指向fn，这里的obj.fn = this就是将方法fn赋予成了obj的一条属性。obj现在已经有了fn方法，执行obj.fn，因为隐式绑定的问题，fn内部的this指向obj，所以输出了听风是风。- 最后通过
delete删除了obj上的fn方法，毕竟执行完不删除会导致obj上的属性越来越多。
叁 ✿ 贰 传参
我们成功改变了this指向并执行了方法，但仍有一个问题待解决，call_无法接受参数。
其实也不难，我们知道函数有一个arguments属性，代指函数接收的所有参数，它是一个类数组，比如下方例子：
Function.prototype.call_ = function (obj) {
console.log(arguments);
};
fn.call_(obj, 1, 2, 3);// [{name:'听风是风'},1,2,3...]
很明显arguments第一位参数是我们需要让this指向的对象，所以从下标1开始才是真正的函数参数，这里就得对arguments进行加工，将下标1之后的参数剪切出来。
有同学肯定就想到了arguments.splice，前面说了arguments并非数组，所以不支持Array方法。没关系，不是还有Array.prototype.slice.call(arguments)吗，转一次数组再用。很遗憾，我们现在是在模拟call方法，也不行。那就用最保险的for循环吧，如下：
Function.prototype.call_ = function (obj) {
var args = [];
// 注意i从1开始
for (var i = 1, len = arguments.length; i < len; i++) {
args.push(arguments[i]);
};
console.log(args);// [1, 2, 3]
};
fn.call_(obj, 1, 2, 3);
数组也不能直接作为参数传递给函数，有同学可能想到array.join字符拼接方法，这也存在一个问题，比如我们是希望传递参数1 2 3三个参数进去，但经过join方法拼接，它会变成一个参数"1,2,3"，函数此时接受的就只有一个参数了。
所以这里我们不得不借用恶魔方法eval，看个简单的例子：
var fn = function (a, b, c) {
console.log(a + b + c);
};
var arr = [1, 2, 3];
fn(1, 2, 3);//6
eval("fn(" + arr + ")");//6
你一定有疑问，为什么这里数组arr都不分割一下，fn在执行时又如何分割数组呢？其实eval在执行时会将变量转为字符串，这里隐性执行了arr.toString()。来看个有趣的对比：
console.log([1, 2, 3].toString()); //"1,2,3"
console.log([1, 2, 3].join(',')); //"1,2,3"
可以看出``eval帮我们做了数组处理，这里就不需要再使用join方法了，因此eval("fn(" + arr + ")")可以看成eval("fn(1,2,3)")`。
我们整理下上面的思路，改写后的模拟方法就是这样：
var name = '时间跳跃';
var obj = {
name: '听风是风'
};
function fn(a, b, c) {
console.log(a + b + c + this.name);
};
//模拟call方法
Function.prototype.call_ = function (obj) {
var args = [];
// 注意i从1开始
for (var i = 1, len = arguments.length; i < len; i++) {
args.push(arguments[i]);
};
obj.fn = this; // 此时this就是函数fn
eval("obj.fn(" + args + ")"); // 执行fn
delete obj.fn; //删除fn
};
fn.call_(obj, "我的", "名字", "是");
可以了吗？很遗憾，这段代码会报错。因为我们传递的后三个参数都是字符串。在args.push(arguments[i])这一步我们提前将字符串进行了解析，这就导致eval在执行时，表达式变成了eval("obj.fn(我的,名字,是)");设想一下我们普通调用函数的形式是这样obj.fn("我的","名字","是")，所以对于eval而言就像传递了三个没加引号的字符串，无法进行解析。
不信我们可以传递三个数字，比如：
fn.call_(obj, 1,2,3); // 6听风是风
因为数字不管加不加引号，作为函数参数都是可解析的，而字符串不加引号，那就被认为是一个变量，而不存在我的这样的变量，自然就报错了。
怎么办呢？其实我们可以在args.push(arguments[i])这里先不急着解析，改写成这样：
args.push("arguments[" + i + "]");
遍历完成的数组args最终就是这个样子["arguments[1]","arguments[2]","arguments[3]"]，当执行eval时，arguments[1]此时确实是作为一个变量存在不会报错，于是被eval解析成了一个真正的字符传递给了函数。
所以改写后的call_应该是这样：
var name = '时间跳跃';
var obj = {
name: '听风是风'
};
function fn(a, b, c) {
console.log(a + b + c + this.name);
};
//模拟call方法
Function.prototype.call_ = function (obj) {
var args = [];
// 注意i从1开始
for (var i = 1, len = arguments.length; i < len; i++) {
args.push("arguments[" + i + "]");
};
obj.fn = this; // 此时this就是函数fn
eval("obj.fn(" + args + ")"); // 执行fn
delete obj.fn; //删除fn
};
fn.call_(obj, "我的", "名字", "是"); // 我的名字是听风是风
叁 ✿ 叁 考虑特殊this指向
我们知道，当call第一个参数为undefined或者null时，this默认指向window，所以上面的方法还不够完美，我们进行最后一次改写，考虑传递参数是否是有效对象：
var name = '时间跳跃';
var obj = {
name: '听风是风'
};
function fn(a, b, c) {
console.log(a + b + c + this.name);
};
//模拟call方法
Function.prototype.call_ = function (obj) {
//判断是否为null或者undefined,同时考虑传递参数不是对象情况
obj = obj ? Object(obj) : window;
var args = [];
// 注意i从1开始
for (var i = 1, len = arguments.length; i < len; i++) {
args.push("arguments[" + i + "]");
};
obj.fn = this; // 此时this就是函数fn
eval("obj.fn(" + args + ")"); // 执行fn
delete obj.fn; //删除fn
};
fn.call_(obj, "我的", "名字", "是"); // 我的名字是听风是风
fn.call_(null, "我的", "名字", "是"); // 我的名字是时间跳跃
fn.call_(undefined, "我的", "名字", "是"); // 我的名字是时间跳跃
那么到这里，对于call方法的模拟就完成了。
肆 ❀ 实现一个apply方法
apply方法因为接受的参数是一个数组，所以模拟起来就更简单了，理解了call实现，我们就直接上代码：
var name = '时间跳跃';
var obj = {
name: '听风是风'
};
function fn(a, b, c) {
console.log(a + b + c + this.name);
};
//模拟call方法
Function.prototype.apply_ = function (obj, arr) {
obj = obj ? Object(obj) : window;
obj.fn = this;
if (!arr) {
obj.fn();
} else {
var args = [];
// 注意这里的i从0开始
for (var i = 0, len = arr.length; i < len; i++) {
args.push("arr[" + i + "]");
};
eval("obj.fn(" + args + ")"); // 执行fn
};
delete obj.fn; //删除fn
};
fn.apply_(obj, ["我的", "名字", "是"]); // 我的名字是听风是风
fn.apply_(null, ["我的", "名字", "是"]); // 我的名字是时间跳跃
fn.apply_(undefined, ["我的", "名字", "是"]); // 我的名字是时间跳跃
伍 ❀ 总
上述代码总有些繁杂，我们来总结下这两个方法：
// call模拟
Function.prototype.call_ = function (obj) {
//判断是否为null或者undefined,同时考虑传递参数不是对象情况
obj = obj ? Object(obj) : window;
var args = [];
// 注意i从1开始
for (var i = 1, len = arguments.length; i < len; i++) {
args.push("arguments[" + i + "]");
};
obj.fn = this; // 此时this就是函数fn
var result = eval("obj.fn(" + args + ")"); // 执行fn
delete obj.fn; //删除fn
return result;
};
// apply模拟
Function.prototype.apply_ = function (obj, arr) {
obj = obj ? Object(obj) : window;
obj.fn = this;
var result;
if (!arr) {
result = obj.fn();
} else {
var args = [];
// 注意这里的i从0开始
for (var i = 0, len = arr.length; i < len; i++) {
args.push("arr[" + i + "]");
};
result = eval("obj.fn(" + args + ")"); // 执行fn
};
delete obj.fn; //删除fn
return result;
};
如果允许使用ES6，使用拓展运算符会简单很多，实现如下：
// ES6 call
Function.prototype.call_ = function (obj) {
obj = obj ? Object(obj) : window;
obj.fn = this;
// 利用拓展运算符直接将arguments转为数组
let args = [...arguments].slice(1);
let result = obj.fn(...args);
delete obj.fn
return result;
};
// ES6 apply
Function.prototype.apply_ = function (obj, arr) {
obj = obj ? Object(obj) : window;
obj.fn = this;
let result;
if (!arr) {
result = obj.fn();
} else {
result = obj.fn(...arr);
};
delete obj.fn
return result;
};
那么到这里，关于call与apply模拟实现全部结束。bind实现存在部分不同，我另起了一篇文章，详情请见js 手动实现bind方法，超详细思路分析！
这篇文章也是第一篇我使用markdown书写的文章，为了统一样式，我也专门修改了博客样式。
