一行代碼看懂bind，call

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

摘要：代碼方法返回一個新的數(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.call

call ：臨時性的改變一個函數(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文檔：