JavaScript深入理解系列之call與apply
定義
call和apply：函數(shù)調(diào)動(dòng)call()方法在執(zhí)行的時(shí)候，函數(shù)的里面的this會(huì)指向第一個(gè)參數(shù)值，除第一個(gè)參數(shù)值后面的若干支都是傳進(jìn)該函數(shù)，簡(jiǎn)而言之就是改變函數(shù)運(yùn)行時(shí)的this指向。
使用示例： fn.call(obj, args1, args2...), fn.apply(obj, [arg1, arg2 ...]), call與apply調(diào)用除了第二個(gè)傳參方式不一樣，其余一樣。
舉個(gè)例子1：
var obj = {
name: '程序員米粉'
};
function fn() {
console.log(this.name)
}
fn() // this.name => undefined
fn.call(obj) // this.name => '程序員米粉'
總結(jié)：
1、fn函數(shù)調(diào)動(dòng)call方法執(zhí)行時(shí)候，函數(shù)的this指向了obj
2、call方法和fn函數(shù)都執(zhí)行了。
如果還看不明白，fn.call(obj)執(zhí)行的時(shí)候，可以看作在obj對(duì)象里面有個(gè)fn函數(shù)執(zhí)行。那么fn函數(shù)里面的this指向就是obj
再舉個(gè)例子2：
var obj = {
name: '程序員米粉',
fn: function() {
console.log(this.name)
}
};
obj.fn(); // this.name => '程序員米粉'
總結(jié)：
1、例子1中的 fn.call(obj)執(zhí)行的時(shí)候，相當(dāng)于例子2 obj.fn(); call方法被調(diào)用的時(shí)候，會(huì)改變當(dāng)前調(diào)用函數(shù)的執(zhí)行上下文（就是改變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 => '程序員米粉'
要實(shí)現(xiàn)自己的myCall方法，首先觀察例子1和例子2中測(cè) obj對(duì)象，有什么不一樣。
不一樣：
1、例子2中obj添加了fn函數(shù)方法。
2、例子2執(zhí)行方法是obj.fn()執(zhí)行，而例子1中執(zhí)行方法是 fn.call(obj)。
這就好辦了，我們?nèi)绾伟牙?改造成例子2呢？
我們總結(jié)一下步驟：
1、把fn函數(shù)設(shè)置為對(duì)象的一個(gè)屬性
2、調(diào)用fn函數(shù)執(zhí)行。
3、調(diào)用完畢之后，從對(duì)象中刪除fn屬性（函數(shù)）。 （給對(duì)象增加了屬性，我們調(diào)用完就可以刪掉）
思路有了，那代碼我們可以寫成這樣：
```js obj.fn = fn; obj.fn(); delete obj.fn; // 刪除屬性 ```
根據(jù)上述思路，那按照這個(gè)思路，寫一個(gè)我們自己的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 => '程序員米粉'
````
執(zhí)行一下myCall方法，可以得出來(lái)，this指向obj對(duì)象，并打印了期望的值，所以這個(gè)方法第一步完成了！
模擬步驟2
繼續(xù)完善一下myCall方法，把fn方法改一下，增加2個(gè)參數(shù), 再執(zhí)行一下方法。
function fn(index, value) {
console.log(this.name);
console.log(index, value);
}
fn.myCall(obj, 111, '我是一個(gè)值');
// this.name => '程序員米粉'
// undefined, undefined
執(zhí)行一個(gè)fn函數(shù)，只打印一個(gè)值出來(lái)，傳進(jìn)入的參數(shù)，沒(méi)有打印出來(lái)。那需要改造一下方法，使參數(shù)也能打印出來(lái)。我們可以從arguments對(duì)象中取值，arguments對(duì)像代表函數(shù)傳進(jìn)來(lái)的對(duì)象，打印看看就知道了。
Function.prototype.myCall = function(context) {
console.log(arguments);
context.fn = this;
context.fn();
delete context.fn;
};
打印出來(lái)的 arguments對(duì)象：
我們可以看到 arguments 對(duì)象結(jié)構(gòu)是：
{
'0': { name: '程序員米粉' },
'1': 111,
'2': '我是一個(gè)值'
}
0代表傳進(jìn)來(lái)的第1個(gè)參數(shù)，1代表第2個(gè)參數(shù)，以此類推。我們看到arguments是一個(gè)類數(shù)組，那就可以用數(shù)組方法，存儲(chǔ)起來(lái)， 由于我們只是獲取參數(shù)，所以從1開(kāi)始取值。
var args = [];
for (var i = 1; i < arguments.length; i++) {
args.push('arguments[' + i + ']');
}
// args為 ["arguments[1]", "arguments[2]", "arguments[3]"]
取值的參數(shù)的問(wèn)題解決了，我們下一步解決一下，如何把這些參數(shù)傳給函數(shù)執(zhí)行。
// 思考一下，怎樣才能這樣傳參給fn函數(shù)執(zhí)行 context.fn(arguments[1], arguments[2]);
可能有人想到如下方法：
// 把數(shù)組里的元素通過(guò)join方法，傳進(jìn)函數(shù)的形參里
context.fn(args.join(','))
// 這樣的話，其實(shí) context.fn(args.join(','))執(zhí)行變成：context.fn("arguments[1]", "arguments[2]");
// 變成了一個(gè)字符串，變成了一個(gè)死值了，無(wú)論傳什么，都變成字符串 "arguments[1]", "arguments[2]" 。。。。
可以有人又想到用ES6方法來(lái)解決。這個(gè)call是ES3的方法，所以還是不用ES6方法解決。
其實(shí)我們可以用 eval方法來(lái)解決。查文檔得知 eval() 函數(shù)會(huì)將傳入的字符串當(dāng)做 JavaScript 代碼進(jìn)行執(zhí)行。這到底是什么意思？
eval() 的參數(shù)是一個(gè)字符串。如果字符串表示的是表達(dá)式，eval() 會(huì)對(duì)表達(dá)式進(jìn)行求值。如果參數(shù)表示一個(gè)或多個(gè) JavaScript 語(yǔ)句，那么eval() 就會(huì)執(zhí)行這些語(yǔ)句。
舉個(gè)例子：
console.log(eval('2 + 2')); // 2 + 2 => 4, 最后輸出是2
console.log(eval('context.fn(' + args +')')) // 相當(dāng)于運(yùn)行 context.fn(arguments[1], arguments[2], ...)，使用eval執(zhí)行一串 JavaScript 語(yǔ)句。args 會(huì)自動(dòng)調(diào)用 Array.toString() 這個(gè)方法。通過(guò)eval自動(dòng)執(zhí)行變成context.fn(arguments[1], arguments[2])這樣執(zhí)行。
代碼如下：
var obj = {
name: '程序員米粉'
};
function fn(index, value) {
console.log(this.name); // 程序員米粉
console.log(index, value); // 111 我是一個(gè)值
}
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, '我是一個(gè)值'); // this.name => '程序員米粉'
執(zhí)行一下方法，輸入完全符合我們的預(yù)期，我們終于搞定了！
模擬步驟3
第一個(gè)參數(shù)傳null或undefined，this指向?yàn)閣indow
舉個(gè)例子：
var name = '程序員米粉'
function fn() {
console.log(this.name); // 程序員米粉
}
fn.call(null); // this.name => '程序員米粉'
fn執(zhí)行的時(shí)候，還是輸出 this.name = '程序員米粉'，說(shuō)明了什么，只要第一個(gè)參數(shù)傳 null或者undefined，那函數(shù)調(diào)用call方法，this指向window
函數(shù)執(zhí)行call方法，有返回值，那就返回。
舉個(gè)例子：
var name = '程序員米粉'
function fn() {
console.log(this.name); // 程序員米粉
return {
name: this.name
}
}
fn.call(null); // this.name => '程序員米粉'
// 執(zhí)行fn函數(shù)直接返回對(duì)象
// {
// name: '程序員米粉'
// }
最終版實(shí)現(xiàn)call代碼
var obj = {
name: '程序員米粉'
};
function fn(index, value) {
console.log(this.name); // 程序員米粉
console.log(index, value); // 111 我是一個(gè)值
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, '我是一個(gè)值'); // this.name => '程序員米粉'
// 最終輸出
// {
// name: "程序員米粉"
// index: 111
// value: "我是一個(gè)值"
// }
實(shí)現(xiàn)apply代碼
由于apply與call實(shí)現(xiàn)原理基本一樣，那就不詳細(xì)敘述了，直接上代碼：
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;
};
結(jié)語(yǔ)
希望看完這篇文章對(duì)你有幫助：
- 理解call和apply原理
- 實(shí)踐自己寫一個(gè)call和apply方法
到此這篇關(guān)于JavaScript深入理解系列之call與apply的文章就介紹到這了,更多相關(guān)js call與apply內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- JavaScript中的apply()方法和call()方法使用介紹
- js中繼承的幾種用法總結(jié)(apply,call,prototype)
- javascript中apply和call方法的作用及區(qū)別說(shuō)明
- 詳解js中的apply與call的用法
- JS中改變this指向的方法(call和apply、bind)
- JavaScript中的apply和call函數(shù)詳解
- js中call與apply的用法小結(jié)
- js apply/call/caller/callee/bind使用方法與區(qū)別分析
- JS面向?qū)ο?、prototype、call()、apply()
- JavaScript學(xué)習(xí)點(diǎn)滴 call、apply的區(qū)別
相關(guān)文章
JavaScript手寫源碼之omit函數(shù)的實(shí)現(xiàn)
最近突然有個(gè)新的想法，想去看看前端的小庫(kù)來(lái)提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了，那就實(shí)現(xiàn)一個(gè)omit函數(shù)吧2023-02-02
基于JavaScript實(shí)現(xiàn)報(bào)警器提示音效果
這篇文章給大家分享分享一段代碼基于JavaScript實(shí)現(xiàn)報(bào)警器提示音效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-10-10
eval的用法eval函數(shù)接收一個(gè)參數(shù)s，如果s不是字符串，則直接返回s。否則執(zhí)行s語(yǔ)句,下面給出eval解析json的示例2014-01-01
JavaScript中Promise的使用方法實(shí)例
現(xiàn)在不會(huì)用Promise都不好意思說(shuō)自己是前端,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Promise使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
利用JS做網(wǎng)頁(yè)特效_大圖輪播(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇利用JS做網(wǎng)頁(yè)特效_大圖輪播(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
一文解決前端JS小數(shù)運(yùn)算精度問(wèn)題
在做項(xiàng)目的時(shí)候,前端需要在表格的底部做一個(gè)匯總的功能,在采用reduce對(duì)當(dāng)前屬性所有值匯總時(shí),發(fā)現(xiàn)匯總結(jié)果存在好長(zhǎng)的小數(shù)位,本文給大家介紹了如何解決前端JS小數(shù)運(yùn)算精度問(wèn)題,需要的朋友可以參考下2024-02-02
XML文件轉(zhuǎn)化成NSData對(duì)象的方法
這篇文章主要介紹了XML文件轉(zhuǎn)化成NSData對(duì)象的方法，需要的朋友可以參考下2015-08-08
基于JavaScript實(shí)現(xiàn)頁(yè)面輪播圖漸變效果的示例代碼
這篇文章主要給大家分享如何使用JavaScript實(shí)現(xiàn)一個(gè)頁(yè)面輪播圖漸變效果,輪播圖是網(wǎng)頁(yè)開(kāi)發(fā)中常見(jiàn)的功能之一,它能夠展示多個(gè)圖片或內(nèi)容,并以一定的時(shí)間間隔進(jìn)行自動(dòng)切換,而通過(guò)添加漸變效果,可以讓切換過(guò)程更加平滑流暢,感興趣的小伙伴可以自己動(dòng)手嘗試一下2023-10-10
js日期相關(guān)函數(shù)dateAdd,dateDiff,dateFormat等介紹
這篇文章主要介紹了js日期相關(guān)函數(shù)dateAdd,dateDiff,dateFormat等介紹,需要的朋友可以參考下2016-09-09