javascirptthisscopecallapplybind柯里化詳細(xì)分析js難點(diǎn)解析

1、apply、call1理論1apply > call 的區(qū)另u2深入理解運(yùn)用 apply、call3bind4理論4apply、calk bind 比較6總結(jié)6this 和 scope7一、作用域 (scope) 7二、作用域鏈(scope chain) 8三、this關(guān)鍵字9四、實(shí)戰(zhàn)應(yīng)用9柯里化101提高適用性112延遲執(zhí)行123固定易變因素134實(shí)例分享14apply > call理論在javascript中,call和apply都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的上下文(context)而存在 的，換句話說(shuō)，就是為了改變函數(shù)體內(nèi)部this的指向。javascript的一大特點(diǎn)是，函數(shù)

2、存在定義時(shí)上下文和運(yùn)行時(shí)上下文以及上下文是 可以改變的這樣的概念。先來(lái)一個(gè)栗子：function fruits() totype = color: "red",say: function() console.log(mmy color is " + this.color);var apple = new fruits; applc.say(); /my color is red但是如果我們有一個(gè)對(duì)banana= color : “yellow” ,我們不想對(duì)它重新定義say方法, 那么我們可以通過(guò)call或apply用apple的say方法：b

3、anana = color: "yellow"apple.say.call(banana); /my color is yellow apple.say.apply(banana); /my color is yellow所以，可以看出call和apply是為了動(dòng)態(tài)改變this而出現(xiàn)的，當(dāng)一個(gè)object沒(méi)有某個(gè)方 法（木栗子中banana沒(méi)有say方法）,但是其他的有（本栗子中apple有say方法）,我們 可以借助call或apply用其它對(duì)象的方法來(lái)操作。apply、call 的區(qū)別對(duì)于apply> call二者而言，作用完全一樣，只是接受參數(shù)的方式不太一樣。例

4、如，有一個(gè) 函數(shù)定義如下：var func = function(argl, arg2) ；就可以通過(guò)如下方式來(lái)調(diào)用:func.call(this, argl, arg2); func.apply(this, largl, arg2j)其中this是你想指定的上下文，他可以是任何一個(gè)javascript對(duì)象（javascript中一切皆對(duì) 象），call需耍把參數(shù)按順序傳遞進(jìn)去，而apply則是把參數(shù)放在數(shù)組里。javascript中，某個(gè)函數(shù)的參數(shù)數(shù)量是不固定的，因此要說(shuō)適川條件的話，當(dāng)你的參數(shù)是明 確知道數(shù)量時(shí)川call o而不確定的時(shí)候用apply,然后把參數(shù)push進(jìn)數(shù)組傳遞進(jìn)去。當(dāng)

5、參數(shù)數(shù)量不確定吋，函數(shù)內(nèi)部也可以通過(guò)arguments這個(gè)數(shù)組來(lái)遍歷所有的參數(shù)。為了鞏固加深記憶，下面列舉一些常用用法：1、數(shù)組之間追加 var array 1 = 12 , “foo”, name “joe” , -2458;var array2 = “doe" , 555 , 100;atotype.push.apply(array 1, array2);/* array 1 值為12 , ”foo”, name “joe” , -2458 , ”doe”, 555 , 100 */2、獲取數(shù)組中的最人值和最小值 var numbers = 5,458,120 ,

6、 -215 ;var maxinnumbers = math.max.apply(math, numbers), /458 maxinnumbcrs = math.max.call(math,5, 458,120 , -215); /458number本身沒(méi)有max方法，但是math有，我們就可以借助call或者apply使用其方法。3、驗(yàn)證是否是數(shù)組(前提是tostring()方法沒(méi)有被重寫(xiě)過(guò))functionisarray(obj) returnototype.tostring.call(obj) = 'object array'4、類(lèi)(偽)數(shù)組使用數(shù)組方

7、法var domnodes = atotype.slice.call(document.getelementsbytagname("*");javascript中存在一種名為偽數(shù)組的對(duì)象結(jié)構(gòu)。比較特別的是arguments對(duì)象，還冇像調(diào) 用 getelementsbytagname , document.childnodes 之類(lèi)的，它們返冋 nodelist 對(duì)象都屬于偽 數(shù)組。不能應(yīng)用array下的push , pop等方法。但是我們能通過(guò)aittotype.slice.call轉(zhuǎn)換為真止的數(shù)組的帶有l(wèi)ength屬性的對(duì)彖，這 樣domnod

8、es就可以應(yīng)用array下的所有方法了。深入理解運(yùn)用apply、call卜面就借用道面試題，來(lái)更深入的去理解下apply和call。定義一個(gè)log方法，讓它可以代理console.log方法，常見(jiàn)的解決方法是：function log(msg) console.log(msg);log(l); /ilog(l,2); /i上面方法可以解決最基本的需求，但是當(dāng)傳入?yún)?shù)的個(gè)數(shù)是不確定的時(shí)候，上血的方法就失 效了，這個(gè)時(shí)候就可以考慮使川apply或者call,注意這里傳入多少個(gè)參數(shù)是不確定的， 所以使用apply是最好的，方法如下：function log()consoleog.apply(cons

9、ole, arguments);log(l)； /ilog(l,2); /i 2接下來(lái)的要求是給每一個(gè)log消息添加一個(gè)”(app)”的前輟，比如：log("hello world1'); /(app)hello world該怎么做比較優(yōu)雅呢？這個(gè)時(shí)候需要想到arguments參數(shù)是個(gè)偽數(shù)組，通過(guò)atotype.slice.call轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組，再使用數(shù)組方法unshift,像這樣：function log()var args = atotype.slice.call(arguments);args.unshiftcxapp)1);conso

10、le.log.apply(console, args);bind理論說(shuō)完了 apply和call ,再來(lái)說(shuō)說(shuō)bindo bind()方法與apply和call很相似，也是可以改 變函數(shù)體內(nèi)this的指向。mdn的解釋是：bind()7j法會(huì)創(chuàng)建一個(gè)新函數(shù)，稱(chēng)為綁定函數(shù)，當(dāng)調(diào)用這個(gè)綁定函數(shù)時(shí)，綁 定函數(shù)會(huì)以創(chuàng)建它時(shí)傳入bind()方法的第一個(gè)參數(shù)作為this,傳入bind()方法的第二個(gè)以及 以后的參數(shù)加上綁定函數(shù)運(yùn)行吋本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來(lái)調(diào)用原函數(shù)。肓接來(lái)看看具體如何使用，在常見(jiàn)的單體模式中，通常我們會(huì)使用_this , that, self等保存 this ,這樣我們可以在改

11、變了上下文z后繼續(xù)引用到它。像這樣：var foo = bar : 1,eventbind: function()var _this = this;$(l.someclass,).on(,clickfunction(event) /* act on the event */console.log(_this.bar);/i);由 于 javascript特冇的 機(jī)制，上下文 環(huán)境在 cvcntbind:function()過(guò) 渡到 $( <.someclass, ).on( 'click' ,function(event) )發(fā)生了改變,上述使用變量保存 this 這 些

12、方式都是有用的，也沒(méi)有什么問(wèn)題。當(dāng)然使用bind()可以更加優(yōu)雅的解決這個(gè)問(wèn)題：var foo = bar : 1,eventbind: function()$(,.someclass,).on(,clickfunction(event) /* act on the event */console.log(this.bar); /i.bind(this);在上述代碼里,bind()創(chuàng)建了一個(gè)函數(shù)，當(dāng)這個(gè)click事件綁定在被調(diào)用的時(shí)候，它的this關(guān) 鍵詞會(huì)被設(shè)置成被傳入的值(這里指調(diào)用bind()時(shí)傳入的參數(shù))。因此，這里我們傳入想要 的上下文this(其實(shí)就是foo ),到bind()函數(shù)

13、中。然后,當(dāng)回調(diào)函數(shù)被執(zhí)行的時(shí)候,this便 指向foo對(duì)象。再來(lái)一個(gè)簡(jiǎn)單的栗子：var bar = function()console.log(this.x);bar(); / undefinedvar func = bar.bind(foo);func(); / 3這里我們創(chuàng)建了一個(gè)新的函數(shù)func,當(dāng)使用bind()創(chuàng)建一個(gè)綁定函數(shù)z后，它被執(zhí)行的吋候，它的this會(huì)被設(shè)置成foo ,而不是像我們調(diào)用bar()時(shí)的全局作用域。有個(gè)有趣的問(wèn)題，如果連續(xù)bind()兩次，亦或者是連續(xù)bind()三次那么輸出的值是什么呢？像這樣：var bar = function()console.log(

14、this.x);var foo = x:3 var sed = x:4var func = bar. bind(foo).bind(sed);func(); /?var fiv = x:5var func = bar.bind(foo).bind(scd).bind(fiv); func(); /?答案是,兩次都仍將輸出3，而非期待中的4和5。原因是,在javascript中,多次bind() 是無(wú)效的。更深層次的原因，bind()的實(shí)現(xiàn)，相當(dāng)于使用函數(shù)在內(nèi)部包了一個(gè)call / apply , 第二次bind()相當(dāng)于再包住笫一次bind(),故笫二次以后的bind是無(wú)法生效的。apply、

15、calk bind 比較那么apply> call> bind三者相比較,之間又有什么異同呢?何時(shí)使用apply、call,何時(shí)使 用bind呢。簡(jiǎn)單的一個(gè)栗子:javascriptvar obj = x: 81,；var foo = gctx: function() return this.x; console.log(foo.getx.bind(obj)(); /81 console.log(foo.getx.call(obj); /81 consoleo g(foo.getx.apply(obj); /81三個(gè)輸出的都是81，但是注意看使用bind()方法的，他后面多了對(duì)括號(hào)

16、。也就是說(shuō)，區(qū)別是，當(dāng)你希望改變上下文環(huán)境之后并非立即執(zhí)行，而是回調(diào)執(zhí)行的時(shí)候，使 用bind()方法。而apply/call貝u會(huì)立即執(zhí)行函數(shù)?？偨Y(jié)apply、apply、apply、call > bind三者都是用來(lái)改變函數(shù)的this對(duì)彖的指向的；call、bind三者笫一個(gè)參數(shù)都是this要指向的対象，也就是想指定的上下文;call、bind三者都可以利用后續(xù)參數(shù)傳參；bind是返冋對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；apply、call則是立即調(diào)用。this 和 scope在javascript屮存在著（his和scope兩個(gè)概念，如果不細(xì)心了解，還真搞不清楚這兩個(gè)概念, 今天我們就來(lái)詳細(xì)了

17、解一下this和scope的區(qū)別以及它們的作用，蝕后會(huì)附上code以加深 理解。一、作用域（scope ）所謂作用域就是:變錄在聲明它們的函數(shù)體以及這個(gè)函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義 的。function scope()var foo = "global”；if(window.getcomputedstyle) var a = “i'm if”；console.log("if: m+foo); /if:globalwhile(l)var b = 'tm while"console.log("while:"+foo);/whi

18、le:globalbreak;!function ()var c = "i'm function"console.log("function:"+foo);/function:global()；console.log(foo,/globala, / i'm ifb, / i'm whilec / c is not defined)；scope();(1) scope函數(shù)中定義的foo變量，除過(guò)自身可以訪問(wèn)以外，還可以在if語(yǔ)句、while語(yǔ)句 和內(nèi)嵌的匿名兩數(shù)中訪問(wèn)。因此，foo的作用域就是scope函數(shù)體。(2) 在javasc

19、ript中,if、while> for等代碼塊不能形成獨(dú)立的作用域。因此,javascript + 沒(méi)冇塊級(jí)作用域，只冇函數(shù)作用域。但是，在js中有一種特殊情況：如果一個(gè)變量沒(méi)有使用va聲明，window便擁有了該屬性，因此這個(gè)變量的作用域不屬于 某一個(gè)函數(shù)體，而是window對(duì)彖。function varscope()foo = "i'm in function"console.log(foo);/fm in functionvarscope();console.log(window.foo); /i'm in function二.作用域鏈(scop

20、e chain)所謂作用域鏈就是：一個(gè)函數(shù)體中嵌套了多層函數(shù)體，并在不同的函數(shù)體中定義了同一 變屋，當(dāng)其中一個(gè)函數(shù)訪問(wèn)這個(gè)變屋時(shí)，便會(huì)形成一條作用域鏈(scope chain)。foo = "window"function first()var foo = "first"function second() var foo = "second"console.log(foo);function third()consoleog(foo);second(); /secondthird(); /firstfirst();當(dāng)執(zhí)行second吋

21、，js引擎會(huì)將second的作用域放置鏈表的頭部，其次是first的作用域，最 后是window對(duì)象，于是會(huì)形成如下作用域鏈：second->first->window,此吋，js引擎沿著該作用域鏈查找變s foo,查到的是” second” 當(dāng)執(zhí)行third時(shí),third形成的作用域鏈:third->first->window,因此查到的是:” frist”特殊情況:with語(yǔ)句js中的with語(yǔ)句主要用來(lái)臨時(shí)擴(kuò)展作用域鏈，將語(yǔ)旬中的對(duì)象添加到作用域的頭部。with 語(yǔ)句結(jié)束后，作用域鏈恢復(fù)正常。foo = "window" function fi

22、rst() var foo = "first"function second() var foo = "second”； consoleog(foo);function third(obj) console.log(foo); /first with (obj) console.log(foo); /objconsole.log(foo); /firstvar obj = foo:'obj' third(obj);first();在執(zhí)行third()時(shí),傳遞了一個(gè)obj對(duì)象,obj中有屬性foo,在執(zhí)行with語(yǔ)句吋，js引擎將 obj放置在了原鏈

23、表的頭部，于是形成的作用域鏈如下：obj->third->first->window,此時(shí)查找到的foo就是obj中的foo,因此輸出的是:”obj”,而在 with之前和之示，都是沿著原來(lái)的鏈表進(jìn)行杳找，從而說(shuō)明，在with語(yǔ)句結(jié)束后，作用域 鏈已恢復(fù)正常。三、this關(guān)鍵字在一個(gè)函數(shù)中，this總是指向當(dāng)前函數(shù)的所有者対象，this總是在運(yùn)行時(shí)才能確定其具 體的指向，也才能知道它的調(diào)用對(duì)彖。這句話總結(jié)了關(guān)于this的一切，切記，切記，切記！(ps:重要的事情說(shuō)三遍!)window, name = "window" function f()console

24、.log();f();/window var obj = name:'obj'f.call(obj); /obj在執(zhí)行f()時(shí)，此時(shí)f()的調(diào)用者是window對(duì)象，因此輸出” window”f.call(obj)是把f()放在obj對(duì)象上執(zhí)彳亍，相當(dāng)于obj.f(),此時(shí)f中的this就是obj,所以輸出的 是” obj”四、實(shí)戰(zhàn)應(yīng)用code1: var foo = "window"var obj = foo : “obj”，gctfoo : function() return function() return this.foo;var

25、 f = obj.getfoo(); f(); /window code2: var foo = "window”；var obj = foo : ”obj“，getfoo : function()var that = this;return function()return that.foo;var f = obj.getfoo();f()； objcodel和code2是對(duì)this和scope最好的總結(jié)，如果對(duì)于運(yùn)彳亍結(jié)果有疑惑，歡迎討論!柯里化在計(jì)算機(jī)科學(xué)屮，柯里化(英語(yǔ)：currying),又譯為卡瑞化或加里化，是把接受多個(gè)參數(shù) 的函數(shù)變換成接受一個(gè)單一參數(shù)(最初函數(shù)的第一個(gè)

26、參數(shù))的函數(shù)，并且返回接受余下的 參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)。這個(gè)技術(shù)由christopher strachey以邏輯學(xué)家哈斯凱 /j< 加里命名的，盡管它是moses schonfinkel和gottlob frege發(fā)明的。這是來(lái)白維基百科的名詞解釋。顧名思義，柯里化具實(shí)本身是固定一個(gè)可以預(yù)期的參數(shù), 并返回一個(gè)特定的函數(shù)，處理批特定的需求。這增加了函數(shù)的適用性，但同吋也降低了函數(shù) 的適用范圍?？匆幌峦ㄓ脤?shí)現(xiàn)：function currying(fn) var slice = atotype.slice,_args = slice.call(arguments,

27、1);return function () var _inargs = slicc.call(argumcnts);return fn.apply(null, args.concat(inargs);； 柯里化的實(shí)用性體現(xiàn)在很多方血：1提高適用性【通用函數(shù)】解決了兼容性問(wèn)題，但同時(shí)也會(huì)再來(lái)，使用的不便利性，不同的應(yīng)用場(chǎng)景往, 要傳遞很多參數(shù)，以達(dá)到解決特定問(wèn)題的h的。冇時(shí)候應(yīng)用中，同一種規(guī)則可能會(huì)反復(fù)使用, 這就可能會(huì)造成代碼的重復(fù)性?？聪旅嬉粋€(gè)例子：function square(i) return i * i;function dubble(i) return i *= 2;functio

28、n map(handeler, list) rctum list.map(handclcr);/數(shù)紐的每一項(xiàng)平方map(square, 1, 2, 3, 4, 5);map(square, 6, 7, 8, 9, 10);map(square, 10, 20, 30, 40, 50);/數(shù)組的每一項(xiàng)加倍map(dubble, 1, 2, 3,4, 5j);map(dubble, 6, 7, 8,9, 10);map(dubble, (1(), 2(), 3(), 40, 5();例子中，創(chuàng)建了一個(gè)map通用函數(shù)，用于適應(yīng)不同的應(yīng)用場(chǎng)景。顯然，通用性不用懷疑。 同時(shí)，例子中重復(fù)傳入了相同的處理兩

29、數(shù)：square和dubble。應(yīng)用屮這種可能會(huì)更多。當(dāng)然，通用性的增強(qiáng)必然帶來(lái)適用性的減弱。但是，我們依然可以 在中間找到一種平衡?？聪旅?，我們利用柯里化改造一下：function square(i) return i * i;function dubblc(i) return i *= 2;function map(handeler, list) return list.map(handeler);var mapsq = currying(map, square);mapsq(l,2, 3,4, 5j);mapsq(6,7, 8,9, 10);mapsq(10, 20, 30,40, 50

30、);/ var mapdb = cunying(map, dubble);mapdb(l,2, 3,4, 5);mapdb(6, 7, 8, 9, 10);mapdb(fl(), 2(), 3(), 4(), 5();/.我們縮小了函數(shù)的適用范圍，但同時(shí)提高函數(shù)的適性。當(dāng)然，也有擴(kuò)展函數(shù)適用范圍的方法 反柯里化，留到卜一篇再討論。由此，可知柯里化不僅僅是提高了代碼的合理性，更重的它突岀一種思想一降低適用范圍， 提高適用性。下面再看一個(gè)例子，一個(gè)應(yīng)用范圍更廣泛更熟悉的例子：function ajax() this.xhr = new xmlhttprequest();atotype

31、.open = function(type, url, data, callback) this.onload = function。callback(this.xhr.responsetext, this.xhr.status, this.xhr);this.xhr.open(type, url, data.async);this.xhr.send(data.paras);rget postsplit(r ,).foreach(function(mt) atotypemt = currying(atotypc.opcn, mt););var xhr = new a

32、jax();xhr.get(7articles/list.php ,function(datas) / done(datas) );var xhrl = new ajax();xhr 1 .post(7articles/add.php ,function(datas) / done(datas);2延遲執(zhí)行柯里化的另一個(gè)應(yīng)用場(chǎng)景是延遲執(zhí)行。不斷的柯里化，累積傳入的參數(shù)，最后執(zhí)行。 看下面：var add = function() var _this = this,_args = argumentsreturn function() if (!arguments.length) var sum

33、= 0;for (var i = 0,c; c = _argsi+;) sum += creturn sum else atotypc.push.apply(_args, arguments) return argumcnts.callccadd(l)(2)(3)(4)();/10通川的寫(xiě)法：var curry = function(fn) var _args =return function cb() if (arguments.length = 0) return fn.apply(this, _args)atotype.push.apply(_args,

34、arguments);return cb;上而累加的例子，可以實(shí)驗(yàn)一下怎么寫(xiě)？3固定易變因素柯里化特性決定了它這應(yīng)用場(chǎng)景。提前把易變因素，傳參固定下來(lái)，生成一個(gè)更明確的應(yīng)用 函數(shù)。最典型的代表應(yīng)用，是bind函數(shù)用以固定this這個(gè)易變對(duì)象。ftotype.bind = function(context) var _this = this,_args = atotype.slice.call(arguments, 1);return function() return _this.apply(context, _a咚s.concat(ato

35、type.slice.call(arguments)4實(shí)例分享 function curry(fn)調(diào)用var args = atotype.slice.call(arguments, 1);執(zhí)行return function()var innerargs = atotype.slice.call(arguments), finalargs = args.concat(innerargs);console.log(finalargs);return fn.apply(null, finalargs);function add(numl, num2, num3)/

36、consoleo g(num3);if(num3 = undefined)num3=0;return numl + num2 + num3;var curriedadd = curry(add, 5);/l 調(diào)用執(zhí)行console.log(curriedadd(3);/8var curriedadd2 = curry(add, 5, 12);/2 調(diào)用執(zhí)行console.log(cumedadd2();/17var curricdadd3 = curry(add, 5, 12j7);/2 調(diào)用執(zhí)行console.log(curriedadd3(); /341和2不同的是，cmry在傳一個(gè)參數(shù)和

37、連續(xù)傳多個(gè)參數(shù)的區(qū)別，一個(gè)參數(shù)在調(diào)用 階段就已處理，雖然執(zhí)行階段也處理，但是空處理多個(gè)參數(shù)調(diào)用階段處理第一個(gè)參數(shù)，后面的參數(shù)在執(zhí)行階段進(jìn)行合并處理調(diào)用161718<script types"text/javascript">function curry(ffn = add(numlf num2, nurr3)/調(diào)用w args = atotype.slicecbll(brgu!nents， 1); args = 5, arguments = function., 5 執(zhí)行return function()var innerargs array.p

38、rototype.slitecbll(bguments)丿 arguments function， 5 finalargs = args.concat(innerargs); args = 5console 1return fn.applycnull finalargs); fn addcnuml r)um2j num3) ；執(zhí)行<script type=htext/javascripth>function curry(fn) fn = add(numl, num2, num3)/調(diào)用var args = arrayprototype.slice.callcargumentsj 1

39、); args = 5， arguments = function5 /執(zhí)行retun function()gvar innerargs = arrayprototype.slicecall(a廠gum已nts),innerargs = 3, arguments = 3finalargs = args.concat(innerargs); finalargs = 5, 3亡fn.app2y(null finalargs);add(numl num2? num3)consolelog(finalargs);調(diào)用-6789161718192021<body><script typ

40、e»"text/javascriptm> function curry(fn) fn = addcnuml num2j num3)/調(diào)用var args = arrayprototype.slicetall.(argumerrts» 1); args = 5， 12, arguf«ents = function, 5, 12 /執(zhí)行return function()var innerargs = arrayprototype.slix皀.call(arguments), arguments = function, 5» 12 finalargs = args.concat(innerargs); args = 5, 12console l.og( finalargs);return on.apply(null， finalargs); fn = addcnuml num2, nuni3)function addcnuml num2j num3) /consolelog(num