一行代碼看懂bind，call

Lavender 發(fā)布于2019-08-26 12:22 / 898人閱讀

摘要：代碼方法返回一個(gè)新的數(shù)組對(duì)象原數(shù)組的淺拷貝，常用于動(dòng)態(tài)解析參數(shù)。看過(guò)的童鞋，對(duì)這行代碼不會(huì)陌生。所以筆者覺(jué)得，從理解角度來(lái)看，新創(chuàng)建的函數(shù)命名為更便于理解。總結(jié)乍一看，函數(shù)有點(diǎn)繞，一經(jīng)推敲還是很好理解的。

代碼

var slice = Function.prototype.call.bind(Array.prototype.slice);

slice() 方法返回一個(gè)新的數(shù)組對(duì)象（原數(shù)組的淺拷貝），常用于動(dòng)態(tài)解析參數(shù)。看過(guò)MDN的童鞋，對(duì)這行代碼不會(huì)陌生。MDN上的描述比較官方，下面我們通過(guò)對(duì)這行代碼的知識(shí)點(diǎn)的逐一分析來(lái)加深理解。

Function.prototype.call

call ：臨時(shí)性的改變一個(gè)函數(shù)的this。原本函數(shù)是誰(shuí)調(diào)用，this就指向誰(shuí)。call是通過(guò)第一個(gè)參數(shù)，告訴函數(shù)本次調(diào)用者另有其人，然后接著傳入?yún)?shù)：

fun.call(thisArg, arg1, arg2, ...)

測(cè)試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)建一個(gè)新的函數(shù)，新函數(shù)的this永久指向第一個(gè)參數(shù)：

fun.bind(thisArg[, arg1[, arg2[, ...]]])

測(cè)試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ù)的頻次并不高，筆者表示從沒(méi)用到過(guò)~
實(shí)用一點(diǎn)的是MDN上介紹的偏函數(shù)，即使函數(shù)預(yù)設(shè)參數(shù)：

//來(lái)源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]

另外一個(gè)實(shí)用的地方就是文章開(kāi)頭寫(xiě)的快捷調(diào)用了：

var slice = Function.prototype.call.bind(Array.prototype.slice);

經(jīng)過(guò)前面的了解，我們?cè)賮?lái)分析下這段代碼：
使用bind將call函數(shù)的this永久綁定為Array.prototype.slice函數(shù)，返回一個(gè)新的call函數(shù)，我們打印一下：

slice
// ? call() { [native code] }

slice({length:1})等價(jià)于Array.prototype.slice.call({length:1})，也就是說(shuō)創(chuàng)建的slice是call 函數(shù)的一個(gè)變體，是call 函數(shù)的一個(gè)變體，是call 函數(shù)的一個(gè)變體。所以筆者覺(jué)得，從理解角度來(lái)看，新創(chuàng)建的函數(shù)slice 命名為newCall更便于理解。

總結(jié)

乍一看，newCallslice函數(shù)有點(diǎn)繞，一經(jīng)推敲還是很好理解的。由此我們也可以寫(xiě)出來(lái)更多的newCall（快捷調(diào)用），例如精確類(lèi)型判斷需要用到的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文檔：