深入理解JavaScript中的call、apply、bind方法的區(qū)別
在JavaScript 中,this的指向是動(dòng)態(tài)變化的,很可能在寫(xiě)程序的過(guò)程中,無(wú)意中破壞掉this的指向,所以我們需要一種可以把this的含義固定的技術(shù),于是就有了call,apply 和bind這三個(gè)方法,來(lái)改變函數(shù)體內(nèi)部 this 的指向,因?yàn)楹瘮?shù)存在「定義時(shí)上下文」和「運(yùn)行時(shí)上下文」以及「上下文是可以改變的」這樣的概念
apply、call
apply:應(yīng)用某一對(duì)象的一個(gè)方法,用另一個(gè)對(duì)象替換當(dāng)前對(duì)象
call:調(diào)用一個(gè)對(duì)象的一個(gè)方法,以另一個(gè)對(duì)象替換當(dāng)前對(duì)象
function person() {} person.prototype = { attr: {age:18,sex:'girl'}, say: function() { console.log("My age is " + this.attr.age); console.log("I am a " + this.attr.sex); } } var Marry = new person(); Marry.say(); // My age is 18 // I am a girl
改變指向
function person() {} person.prototype = { attr: {age:18,sex:'girl'}, say: function() { console.log("My age is " + this.attr.age); console.log("I am a " + this.attr.sex); } } xiaoming ={ attr : {age:20,sex:'boy'} }; var Marry = new person(); Marry.say(); Marry.say.call(xiaoming); // My age is 18 // I am a girl // My age is 20 // I am a boy
共同之處
都可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法,將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。
不同之處
1、apply:最多只能有兩個(gè)參數(shù)——新this對(duì)象和一個(gè)數(shù)組 argArray。如果給該方法傳遞多個(gè)參數(shù),則把參數(shù)都寫(xiě)進(jìn)這個(gè)數(shù)組里面,當(dāng)然,即使只有一個(gè)參數(shù),也要寫(xiě)進(jìn)數(shù)組里面。如果 argArray 不是一個(gè)有效的數(shù)組或者不是 arguments 對(duì)象,那么將導(dǎo)致一個(gè) TypeError。如果沒(méi)有提供 argArray 和 thisObj 任何一個(gè)參數(shù),那么 Global 對(duì)象將被用作 thisObj,并且無(wú)法被傳遞任何參數(shù)。
fun.call(thisArg[, arg1[, arg2[, ...]]]) function f(x,y){ console.log(x+y); } f.call(null, 1, 1) //return 2
2、call:則是直接的參數(shù)列表,主要用在js對(duì)象各方法互相調(diào)用的時(shí)候,使當(dāng)前this實(shí)例指針保持一致,或在特殊情況下需要改變this指針。如果沒(méi)有提供 thisObj 參數(shù),那么 Global 對(duì)象被用作 thisObj。
fun.apply(thisArg, [argsArray]) function f(x,y){ console.log(x+y); } f.call(null, [1,1]) //return 2
apply和call功能一樣,只是傳入的參數(shù)列表形式不同,其中 thisArg 是你想指定的上下文,他可以是任何一個(gè) JavaScript 對(duì)象(JavaScript 中一切皆對(duì)象),call 需要把參數(shù)按順序傳遞進(jìn)去,而 apply 則是把參數(shù)放在數(shù)組里?! ?/p>
如果某個(gè)函數(shù)的參數(shù)數(shù)量是不固定的,當(dāng)你的參數(shù)是明確知道數(shù)量時(shí)用 call ,而不確定的時(shí)候用 apply,然后把參數(shù) push 進(jìn)數(shù)組傳遞進(jìn)去。當(dāng)參數(shù)數(shù)量不確定時(shí),函數(shù)內(nèi)部也可以通過(guò) arguments 這個(gè)數(shù)組來(lái)遍歷所有的參數(shù),我們看一下一些用法
代碼一
var array1 = [12 , "foo" , {name:"Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); console.log(array1); //[12, "foo", Object, -2458, "Doe", 555, 100]
代碼二
var numbers = [5, 458 , 120 , -215 ]; Math.max.apply(null,numbers); //458
代碼三
log(12 , "foo" , {name:"Joe"} , -2458); function log(){ var args = Array.prototype.slice.call(arguments); args.unshift('(app)'); console.log.apply(console, args); }; // (app) 12 foo Object {name: "Joe"} -2458
bind
fun.bind(thisArg[, arg1[, arg2[, ...]]])
與上面不同的是,bind會(huì)返回一個(gè)改變this指向的新函數(shù) ,注意這里強(qiáng)調(diào)的是新函數(shù),其與之前的使用的不是同一塊內(nèi)存地址,所以當(dāng)你需要重復(fù)使用這個(gè)函數(shù)的時(shí)候,你就不得不把其保存到一個(gè)變量,方便下次調(diào)用。上面的兩個(gè)函數(shù)都是返回的執(zhí)行結(jié)果,即調(diào)用即執(zhí)
行,此外,另外需要注意的地方是,bind函數(shù)中的首個(gè)參數(shù),會(huì)自動(dòng)成為返回新函數(shù)中參數(shù)的默認(rèn)值,那么正式調(diào)用的時(shí)候,只需要給出除首個(gè)參數(shù)外,剩余參數(shù)即可。
function f(x,y){ console.log(x+y); } f.call(null, [1,1]) var new_f = f.bind(null,1,1) //return new function new_f(1) //return 2
需要說(shuō)明的是,上面所有示例代碼中的thisArg參數(shù)均用null來(lái)代替了,在未給出指定thisArg對(duì)象的情況下,null與undefined下this指向是全局對(duì)象,即js代碼執(zhí)行環(huán)境
apply、call、bind比較
var obj = {bar: 'Oops , this is a bad idea' }; var foo = { get: function() { return this.bar; } } var bind = foo.get.bind(obj) ,call = foo.get.call(obj) ,apply = foo.get.apply(obj); console.log(bind(),call,apply); console.log(bind,call,apply); console.log(typeof bind,typeof call,typeof apply); console.log(typeof bind(),typeof call,typeof apply);
看到區(qū)別沒(méi)有,區(qū)別是,當(dāng)你希望改變上下文環(huán)境之后并非立即執(zhí)行,而是回調(diào)執(zhí)行的時(shí)候,使用 bind() 方法。而 apply/call 則會(huì)立即執(zhí)行函數(shù)
apply 、 call 、bind 三者都是用來(lái)改變函數(shù)的this對(duì)象的指向的; apply 、 call 、bind 三者第一個(gè)參數(shù)都是this要指向的對(duì)象,也就是想指定的上下文; apply 、 call 、bind 三者都可以利用后續(xù)參數(shù)傳參; bind是返回對(duì)應(yīng)函數(shù),便于稍后調(diào)用;apply、call則是立即調(diào)用
以上這篇深入理解JavaScript中的call、apply、bind方法的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 函數(shù)參數(shù)是傳值(byVal)還是傳址(byRef) 分享
這篇文章主要介紹了在JS中函數(shù)參數(shù)是傳值(byVal)還是傳址(byRef)的誤區(qū)我們通過(guò)實(shí)例說(shuō)明一下,有需要的朋友可以參考2013-07-07JS非Alert實(shí)現(xiàn)網(wǎng)頁(yè)右下角“未讀信息”效果彈窗
這篇文章主要介紹了JS非Alert實(shí)現(xiàn)網(wǎng)頁(yè)右下角“未讀信息”效果彈窗的方法,涉及JavaScript動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)彈窗效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09淺談javascript運(yùn)算符——條件,逗號(hào),賦值,()和void運(yùn)算符
下面小編就為大家?guī)?lái)一篇淺談javascript運(yùn)算符——條件,逗號(hào),賦值,()和void運(yùn)算符。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07JS檢測(cè)頁(yè)面中哪個(gè)HTML標(biāo)簽觸發(fā)點(diǎn)擊事件的方法
這篇文章主要介紹了JS檢測(cè)頁(yè)面中哪個(gè)HTML標(biāo)簽觸發(fā)點(diǎn)擊事件的方法,涉及javascript頁(yè)面元素事件響應(yīng)機(jī)制,需要的朋友可以參考下2016-06-06BootStrap 實(shí)現(xiàn)各種樣式的進(jìn)度條效果
這篇文章主要介紹了BootStrap 實(shí)現(xiàn)各種樣式的進(jìn)度條效果,代碼分為動(dòng)態(tài)和疊加兩種效果,需要的朋友可以參考下2016-12-12JavaScript+Node.js寫(xiě)一款markdown解析器
這篇文章主要介紹了利用JavaScript和Node.js寫(xiě)一款markdown解析器,首先編寫(xiě)getHtml函數(shù),傳入markdown文本字符串,下面更多詳細(xì)內(nèi)容,需要的小伙伴可以參考一下2022-02-02兼容IE和Firefox火狐的上下、左右循環(huán)無(wú)間斷滾動(dòng)JS代碼
html里的marqueen也能實(shí)現(xiàn)內(nèi)容的滾動(dòng),但滾動(dòng)是間斷的,運(yùn)用JavaScript可以使這一問(wèn)題得到改觀,實(shí)現(xiàn)無(wú)間斷的滾動(dòng),讓頁(yè)面看起來(lái)更美觀2013-04-04JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧
這篇文章主要介紹了JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧的相關(guān)資料,需要的朋友可以參考下2016-05-05