JavaScript深入理解系列:call與apply

程式設計師米粉 發表於 2022-04-14
JavaScript

定義

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物件:

image

我們可以看到 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方法

文中如有錯誤,歡迎在評論區指正,如果這篇文章幫助到了你,歡迎點贊和關注,後續會輸出更好的分享。

歡迎關注公眾號:【程式設計師米粉】
公眾號分享開發程式設計、職場晉升、大廠面試經驗