JS中bind方法与函数柯里化

男娘i 2022-07-15 22:40 220阅读 0赞

### 原生bind方法 ###

不同于jQuery中的bind方法只是简单的绑定事件函数，原生js中bind()方法略复杂，该方法上在ES5中被引入，大概就是IE9＋等现代浏览器都支持了（有关ES5各项特性的支持情况戳这里[ECMAScript 5 compatibility table][]），权威指南上提到在ES3中利用apply模拟该方法的实现（JS权威指南中函数那章）， 但无法真实还原该方法， 这也是真bind方法中的有趣特性。

首先bind不同于call和apply只是单纯地设置this的值后传参，它还会将所有传入bind()方法中的实参（第一个参数之后的参数）与this一起绑定，我个人的理解是其后的参数也会作为绑定上下文的一部分，以下为《js权威指南》原文的说法：

> The ECMAScript 5 bind() method does more than just bind a function to an object. It also performs partial application: any arguments you pass to bind() after the first are bound along with the this value.

关于这个特性看《权威指南》原文的栗子：

var sum = function(x,y) { return x + y }; var succ = sum.bind(null, 1); //让this指向null，其后的实参也会作为实参传入被绑定的函数sum succ(2) // => 3: 可以看到1绑定到了sum函数中的x

其次， bind()方法所返回的函数的length（形参数量）等于原函数的形参数量减去传入bind()方法中的实参数量（第一个参数以后的所有参数），因为传入bind中的实参都会绑定到原函数的形参，吗的，绕死了， 举个栗子：

function func(a,b,c,d){...} //func的length为4 var after = func.bind(null,1,2) //这里输入了两个实参（1，2）绑定到了func函数的a，b console.log(after.length) //after的length为 2

第三，当bind()所返回的函数用作构造函数的时候， 传入bind()的this将被忽略，实参会全部传入原函数，这样说很抽象， 举个栗子?

function original(x){ this.a=1; this.b =function(){ return this.a + x} } var obj={ a:10 } var newObj = new (original.bind(obj,2)) //传入了一个实参2 console.log(newObj.a) //输出 1, 说明返回的函数用作构造函数时obj(this的值)被忽略了 console.log(newObj.b()) //输出3 ，说明传入的实参2传入了原函数original

### 函数柯里化的概念 ###

以上就是ES5中bind方法的特性， 这种技术也被称为函数柯里化，在看《js权威指南》的时候感觉这玩意逼格太高直接忽略了，最近又碰到这概念， 索性打算搞定他。函数柯里化在百科的解释为：

> 在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。

以上翻译成人话就是：这种技术将多个参数的函数变成只带一个参数的函数。bind方法就是该技术在js中的实践。作为一个菜鸟， 目前只用过bind设置this的值， 码这篇博客的目的就是厘清下bind的特性。

[ECMAScript 5 compatibility table]: http://kangax.github.io/compat-table/es5/