JavaScript深入理解系列：call与apply

定义

call and apply：当函数调动call()方法执行时，函数中的this会指向第一个参数值，但第一个参数值后面的几个分支除外。传入函数中，简单来说就是在函数运行时改变this指针。

使用示例： fn.call(obj, args1, args2...), fn.apply(obj, [arg1, arg2 ...]), call与apply调用除了第二个传参方式不一样，其余一样。

示例 1：

var  obj = {
    name: '程序员米粉'
};
function fn() {
    console.log(this.name)
}
fn() // this.name => undefined
fn.call(obj) // this.name => '程序员米粉'

总结：

1、fn函数调动call方法执行时候，函数的this指向了obj
2、call方法和fn函数都执行了。

如果还是不明白，执行fn.call(obj)的时候，可以看成是在obj对象中执行的一个fn函数。那么fn函数中的this指针就是obj

再举一个例子2：

var  obj = {
    name: '程序员米粉',
    fn: function() {
        console.log(this.name)
    }
};
obj.fn(); // this.name => '程序员米粉'

总结：

1、例子1中的 fn.call(obj)执行的时候，相当于例子2 obj.fn(); call方法被调用的时候，会改变当前调用函数的执行上下文（就是改变this指向）。

模拟步骤 1

示例 1：

var  obj = {
    name: '程序员米粉'
};
function fn() {
    console.log(this.name)
}
fn.call(obj) // this.name => '程序员米粉'

示例 2：

var  obj = {
    name: '程序员米粉',
    fn: function() {
        console.log(this.name)
    }
};
obj.fn(); // this.name => '程序员米粉'

要实现自己的方法，先观察示例1和示例2中的obj对象，有什么区别。

不同：

1、例子2中obj添加了fn函数方法。
2、例子2执行方法是obj.fn()执行，而例子1中执行方法是 fn.call(obj)。

这个好办，怎么把例子1变成例子2呢？

让我们总结一下步骤：

1、把fn函数设置为对象的一个属性
2、调用fn函数执行。
3、调用完毕之后，从对象中删除fn属性（函数）。 （给对象增加了属性，我们调用完就可以删掉）

有了这个思路，我们可以这样写代码：

```js
obj.fn = fn;
obj.fn();
delete obj.fn; // 删除属性
```

按照上面的思路，那么按照这个思路，写一个我们自己的方法：

```js
Function.prototype.myCall = function(context) {
    context.fn = this;
    context.fn();
    delete context.fn;
};
var  obj = {
    name: '程序员米粉'
};
function fn() {
    console.log(this.name);
}

fn.myCall(obj) // this.name => '程序员米粉'
 ````

执行方法，可以断定this指向obj对象并打印期望值，至此该方法的第一步就完成了！

模拟步骤 2

继续改进方法，改变fn方法，添加2个参数，再次执行方法。

function fn(index, value) {
	console.log(this.name);
    console.log(index, value);
}
fn.myCall(obj, 111, '我是一个值');
// this.name => '程序员米粉'
// undefined, undefined

执行一个fn函数，只打印出一个值，传入的参数不打印出来。它需要修改方法，以便参数也可以打印。我们可以从对象中获取值，对象代表函数传入的对象，打印出来就可以看到。

Function.prototype.myCall = function(context) {
    console.log(arguments);
	context.fn = this;
	context.fn();
	delete context.fn;
};

打印对象：

我们可以看到对象结构是：

{ 
    '0': { name: '程序员米粉' }, 
    '1': 111, 
    '2': '我是一个值' 
}

0代表传入的第一个参数，1代表第二个参数，以此类推。我们看到它是一个类数组，所以我们可以使用数组的方法来存储它。由于我们只获取参数，所以值从1开始。

var args = [];
for (var i = 1; i < arguments.length; i++) {
    args.push('arguments[' + i + ']');
}
// args为 ["arguments[1]", "arguments[2]", "arguments[3]"]

value的参数问题解决了，接下来解决，如何将这些参数传递给函数执行。

// 思考一下，怎样才能这样传参给fn函数执行
context.fn(arguments[1], arguments[2]);

可能有人会想到以下方法：

有些人可能会想到使用 ES6 的方法来解决它。这个调用是 ES3 方法，所以还是不能用 ES6 方法解决。

其实我们可以用eval的方法来解决。检查文档以了解 eval() 函数会将传入的字符串作为代码执行。这究竟是什么意思？

eval() 的参数是一个字符串。如果字符串表示的是表达式，eval() 会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句，那么eval() 就会执行这些语句。

例如：

.log(eval(‘2 + 2’)); // 2 + 2 => 4，最终输出为2

.log(eval(‘.fn(‘ + args +’)’)) // 相当于运行.fn([1], [2], … )，使用eval执行一系列语句.

args 将自动调用 Array.() 方法。通过eval自动执行变成.fn([1], [2])来执行。

代码如下：

var  obj = {
	name: '程序员米粉'
};
function fn(index, value) {
	console.log(this.name); // 程序员米粉
	console.log(index, value); // 111 我是一个值
}
Function.prototype.myCall = function(context) {
	context.fn = this;
	var args = [];
	for (var i = 1; i  '程序员米粉'

执行方法，输入的正是我们所期望的，我们终于得到了！

模拟步骤3的第一个参数传入null或，this指向

例如：

var name = '程序员米粉'
function fn() {

	console.log(this.name); // 程序员米粉
}
fn.call(null); // this.name => '程序员米粉'

fn执行的时候还是输出this.name = ‘ rice fan’，意思是只要第一个参数传入null或，函数调用call方法，this指向要执行的函数调用方法。

，有返回值，则返回。

例如：

var name = '程序员米粉'
function fn() {
	console.log(this.name); // 程序员米粉
    return {
        name: this.name
    }
}
fn.call(null); // this.name => '程序员米粉'
// 执行fn函数直接返回对象
// {
//    name: '程序员米粉'
// }

最终版本实现调用代码

var obj = {
	name: '程序员米粉'
};
function fn(index, value) {
	console.log(this.name); // 程序员米粉
	console.log(index, value); // 111 我是一个值
	return {
		name: this.name,
		index: index,
		value: value
	};
}
Function.prototype.myCall = function(context) {
	var context = context || window;

	context.fn = this;
	var args = [];
	for (var i = 1; i  '程序员米粉'
// 最终输出
// {
//     name: "程序员米粉"
//     index: 111
//     value: "我是一个值"
// }

实现应用代码

因为apply和call的原理基本一样，就不详细描述了，直接上代码：

Function.prototype.myApply = function(context, arr) {
	var context = context || window;
	context.fn = this;
	var result;
	if (!arr) {
		result = context.fn();
	} else {
		var args = [];
		for (var i = 0; i < arr.length; i++) {
			args.push('arr[' + i + ']');
		}
		result = eval('context.fn(' + args + ')');
	}
	delete context.fn;
	return result;
};

结论

希望阅读这篇文章对你有所帮助：

文章如有错误，请在评论区指正。如果本文对你有帮助，请点赞关注，后续会输出更好的分享。