一行代码看懂bind，call

代码

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

slice() 方法返回一个新的数组对象（原数组的浅拷贝），经常使用于动态解析参数。看过MDN的童鞋，对这行代码不会陌生。MDN上的描述比较官方，下面咱们经过对这行代码的知识点的逐一分析来加深理解。

Function.prototype.call

call ：临时性的改变一个函数的this。本来函数是谁调用，this就指向谁。call是经过第一个参数，告诉函数本次调用者另有其人，而后接着传入参数：

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：建立一个新的函数，新函数的this永久指向第一个参数：

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} 虽然调用的仍是t，可是this指向的仍是bind的
t.testBind()
//{testBind: ƒ, testBind2: ƒ}
t.testBind2===t.testBind
//false

使用bind去建立的新函数的频次并不高，笔者表示从没用到过~
实用一点的是MDN上介绍的偏函数，即便函数预设参数：

//来源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]

另一个实用的地方就是文章开头写的快捷调用了：

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

通过前面的了解，咱们再来分析下这段代码：
使用bind将call函数的this永久绑定为Array.prototype.slice函数，返回一个新的call函数，咱们打印一下：

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

slice({length:1})等价于Array.prototype.slice.call({length:1})，也就是说建立的slice是call 函数的一个变体，是call 函数的一个变体，是call 函数的一个变体。因此笔者以为，从理解角度来看，新建立的函数slice 命名为newCall更便于理解。

总结

乍一看，newCallslice函数有点绕，一经推敲仍是很好理解的。由此咱们也能够写出来更多的newCall（快捷调用），例如精确类型判断须要用到的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