定義
call和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 => '程序員米粉'
要實現自己的myCall方法，首先觀察例子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; // 刪除屬性
```
根據上述思路，那按照這個思路，寫一個我們自己的myCall方法：
```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 => '程序員米粉'
````
執行一下myCall方法，可以得出來，this指向obj對象，并打印了期望的值，所以這個方法第一步完成了！
模擬步驟2
繼續完善一下myCall方法，把fn方法改一下，增加2個參數, 再執行一下方法。
function fn(index, value) {
console.log(this.name);
console.log(index, value);
}
fn.myCall(obj, 111, '我是一個值');
// this.name => '程序員米粉'
// undefined, undefined
執行一個fn函數，只打印一個值出來，傳進入的參數，沒有打印出來。那需要改造一下方法，使參數也能打印出來。我們可以從arguments對象中取值，arguments對像代表函數傳進來的對象，打印看看就知道了。
Function.prototype.myCall = function(context) {
console.log(arguments);
context.fn = this;
context.fn();
delete context.fn;
};
打印出來的 arguments對象：
我們可以看到 arguments 對象結構是：
{
'0': { name: '程序員米粉' },
'1': 111,
'2': '我是一個值'
}
0代表傳進來的第1個參數，1代表第2個參數，以此類推。我們看到arguments是一個類數組，那就可以用數組方法，存儲起來， 由于我們只是獲取參數，所以從1開始取值。
var args = [];
for (var i = 1; i < arguments.length; i++) {
args.push('arguments[' + i + ']');
}
// args為 ["arguments[1]", "arguments[2]", "arguments[3]"]
取值的參數的問題解決了，我們下一步解決一下，如何把這些參數傳給函數執行。
// 思考一下，怎樣才能這樣傳參給fn函數執行
context.fn(arguments[1], arguments[2]);
可能有人想到如下方法：
// 把數組里的元素通過join方法，傳進函數的形參里
context.fn(args.join(','))
// 這樣的話，其實 context.fn(args.join(','))執行變成：context.fn("arguments[1]", "arguments[2]");
// 變成了一個字符串，變成了一個死值了，無論傳什么，都變成字符串 "arguments[1]", "arguments[2]" 。。。。
可以有人又想到用ES6方法來解決。這個call是ES3的方法，所以還是不用ES6方法解決。
其實我們可以用 eval方法來解決。查文檔得知 eval() 函數會將傳入的字符串當做 JavaScript 代碼進行執行。這到底是什么意思？
eval() 的參數是一個字符串。如果字符串表示的是表達式，eval() 會對表達式進行求值。如果參數表示一個或多個 JavaScript 語句，那么eval() 就會執行這些語句。
舉個例子：
console.log(eval('2 + 2')); // 2 + 2 => 4, 最后輸出是2
console.log(eval('context.fn(' + args +')')) // 相當于運行 context.fn(arguments[1], arguments[2], ...)，使用eval執行一串 JavaScript 語句。
args 會自動調用 Array.toString() 這個方法。通過eval自動執行變成context.fn(arguments[1], arguments[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 < arguments.length; i++) {
args.push('arguments[' + i + ']');
}
eval('context.fn(' + args + ')');
delete context.fn;
};
fn.myCall(obj, 111, '我是一個值'); // this.name => '程序員米粉'
執行一下方法，輸入完全符合我們的預期，我們終于搞定了！
模擬步驟3
第一個參數傳null或undefined，this指向為window
舉個例子：
var name = '程序員米粉'
function fn() {
console.log(this.name); // 程序員米粉
}
fn.call(null); // this.name => '程序員米粉'
fn執行的時候，還是輸出 this.name = '程序員米粉'，說明了什么，只要第一個參數傳 null或者undefined，那函數調用call方法，this指向window
函數執行call方法，有返回值，那就返回。
舉個例子：
var name = '程序員米粉'
function fn() {
console.log(this.name); // 程序員米粉
return {
name: this.name
}
}
fn.call(null); // this.name => '程序員米粉'
// 執行fn函數直接返回對象
// {
// name: '程序員米粉'
// }
最終版實現call代碼
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 < arguments.length; i++) {
args.push('arguments[' + i + ']');
}
var result = eval('context.fn(' + args + ')');
delete context.fn;
return result;
};
fn.myCall(obj, 111, '我是一個值'); // this.name => '程序員米粉'
// 最終輸出
// {
// name: "程序員米粉"
// index: 111
// value: "我是一個值"
// }
實現apply代碼
由于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;
};
結語
希望看完這篇文章對你有幫助：
- 理解call和apply原理
- 實踐自己寫一個call和apply方法
文中如有錯誤，歡迎在評論區指正，如果這篇文章幫助到了你，歡迎點贊和關注，后續會輸出更好的分享。
歡迎關注公眾號：【程序員米粉】
公眾號分享開發編程、職場晉升、大廠面試經驗
