摘要:代碼方法返回一個新的數(shù)組對象原數(shù)組的淺拷貝,常用于動態(tài)解析參數(shù)。看過的童鞋,對這行代碼不會陌生。所以筆者覺得,從理解角度來看,新創(chuàng)建的函數(shù)命名為更便于理解。總結(jié)乍一看,函數(shù)有點繞,一經(jīng)推敲還是很好理解的。
代碼
var slice = Function.prototype.call.bind(Array.prototype.slice);
slice() 方法返回一個新的數(shù)組對象(原數(shù)組的淺拷貝),常用于動態(tài)解析參數(shù)。看過MDN的童鞋,對這行代碼不會陌生。MDN上的描述比較官方,下面我們通過對這行代碼的知識點的逐一分析來加深理解。
Function.prototype.callcall :臨時性的改變一個函數(shù)的this。原本函數(shù)是誰調(diào)用,this就指向誰。call是通過第一個參數(shù),告訴函數(shù)本次調(diào)用者另有其人,然后接著傳入?yún)?shù):
fun.call(thisArg, arg1, arg2, ...)
測試demo:
function testCall(){console.log(this)} testCall() //Window {postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window, …} testCall.call({}) //{} testCall() //Window {postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window, …}Function.prototype.bind
bind:創(chuàng)建一個新的函數(shù),新函數(shù)的this永久指向第一個參數(shù):
fun.bind(thisArg[, arg1[, arg2[, ...]]])
測試demo:
var t={testBind(){console.log(this)}} t.testBind() //{testBind: ?} t.testBind2=t.testBind.bind({x:1}) t.testBind2() //{x: 1} 雖然調(diào)用的還是t,但是this指向的還是bind的 t.testBind() //{testBind: ?, testBind2: ?} t.testBind2===t.testBind //false
使用bind去創(chuàng)建的新函數(shù)的頻次并不高,筆者表示從沒用到過~
實用一點的是MDN上介紹的偏函數(shù),即使函數(shù)預(yù)設(shè)參數(shù):
//來源MDN function list() { return Array.prototype.slice.call(arguments); } var list1 = list(1, 2, 3); // [1, 2, 3] // Create a function with a preset leading argument var leadingThirtysevenList = list.bind(undefined, 37); var list2 = leadingThirtysevenList(); // [37] var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3] var leadingThirtysevenList = list.bind(undefined, 37,38,39,40); leadingThirtysevenList();//[37, 38, 39, 40] leadingThirtysevenList(1,2,3);//[37, 38, 39, 40, 1, 2, 3]
另外一個實用的地方就是文章開頭寫的快捷調(diào)用了:
var slice = Function.prototype.call.bind(Array.prototype.slice);
經(jīng)過前面的了解,我們再來分析下這段代碼:
使用bind將call函數(shù)的this永久綁定為Array.prototype.slice函數(shù),返回一個新的call函數(shù),我們打印一下:
slice // ? call() { [native code] }
slice({length:1})等價于Array.prototype.slice.call({length:1}),也就是說創(chuàng)建的slice是call 函數(shù)的一個變體,是call 函數(shù)的一個變體,是call 函數(shù)的一個變體。所以筆者覺得,從理解角度來看,新創(chuàng)建的函數(shù)slice 命名為newCall更便于理解。
總結(jié)乍一看,newCallslice函數(shù)有點繞,一經(jīng)推敲還是很好理解的。由此我們也可以寫出來更多的newCall(快捷調(diào)用),例如精確類型判斷需要用到的toString:
var toString=Function.prototype.call.bind(Object.prototype.toString) toString({}) //"[object Object]" toString(1) //"[object Number]" toString(null) //"[object Null]" toString() //"[object Undefined]" toString(false) //"[object Boolean]" toString(function(){}) //"[object Function]"
MDN文檔:
MDN-call
MDN-bind
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/108573.html
摘要:我們都說構(gòu)造函數(shù)開頭首字母大寫但那只是人為的規(guī)定并不是語法。只是一個操作符,任何函數(shù)都能通過來執(zhí)行,并不只是構(gòu)造函數(shù),只不過我們認為之后的都是構(gòu)造函數(shù)。 這一篇文章主要是講述一些有關(guān)js的小知識點。因為我也不是很精通哪一方面只能把自己知道的一點點寫出來。取名大雜燴也是這意思吧,既然是道菜那么就來嘗嘗我的手藝吧。 第一道菜 1.首先,我想說一下事件綁定。事件綁定我們都知道有:on + t...
摘要:返回的函數(shù)可以作為構(gòu)造函數(shù)使用被用作構(gòu)造函數(shù)時,應(yīng)指向出來的實例,同時有屬性,其指向?qū)嵗脑汀E袛喈?dāng)前被調(diào)用時,是用于普通的還是用于構(gòu)造函數(shù)從而更改指向。運算符用來測試一個對象在其原型鏈中是否存在一個構(gòu)造函數(shù)的屬性。 寫在最前 最近開始重新學(xué)習(xí)一波js,框架用久了有些時候覺得這樣子應(yīng)該可以實現(xiàn)發(fā)現(xiàn)就真的實現(xiàn)了,但是為什么這么寫好像又說不太清楚,之前讀了LucasHC以及冴羽的兩篇關(guān)于...
摘要:大致就是這樣所以可以模擬實現(xiàn)和。這些參數(shù)作為的第二個參數(shù)跟在后面,之后它們會被插入到目標(biāo)函數(shù)的參數(shù)列表的開始位置,傳遞給綁定函數(shù)的參數(shù)會跟在它們的后面。 一個前端知識點匯總綜合了學(xué)習(xí)過程中的知識點,比如this、閉包、BFC、ES6等,如果大佬們覺得還可以的話,求個star啦! call和apply 每個函數(shù)都包含兩個非繼承而來的方法:apply()和call() 用途相同,都是在...
摘要:所以,這篇文章將通過一段非常簡潔的等式,把當(dāng)中一個相對較難的知識點,,和給串聯(lián)起來要理解當(dāng)中的這三個關(guān)鍵字,首先得弄清楚它們是用來干嘛的。方案讓吃掉,直接消化吸收的所有能力。 關(guān)于JS當(dāng)中的call,apply和bind,相信大家和我一樣,已經(jīng)看過了無數(shù)篇相關(guān)的文章,都有自己的理解。所以這篇文章并非什么科普類的文章,僅僅是把我自己的理解記錄下來。 我的學(xué)習(xí)習(xí)慣,是喜歡把各種看似孤立的知...
摘要:綁定為這個數(shù)組五綁定如果使用來創(chuàng)建對象,因為后面跟著的是構(gòu)造函數(shù),所以稱它為構(gòu)造器調(diào)用。為傳進來的構(gòu)造函數(shù)你這要看懂這步就行。 記得剛開始,我理解 this 的時候 也是云里霧里的,哈哈,希望通過這篇文章,對你有幫助吧。 關(guān)于 this 最多的說法,就是:誰調(diào)用它,this就指向誰。這話呢,不能說它錯了,只能說它講的不嚴謹,為什么呢?我們先來了解下 this 的幾種綁定規(guī)則。 一...
閱讀 1211·2023-04-26 02:20
閱讀 3337·2021-11-22 14:45
閱讀 4111·2021-11-17 09:33
閱讀 972·2021-09-06 15:00
閱讀 1479·2021-09-03 10:30
閱讀 3837·2021-07-26 22:01
閱讀 990·2019-08-30 15:54
閱讀 531·2019-08-30 15:43