在介绍柯理化函数思想之前我先讲一个定义，叫函数绑定。
所谓函数绑定，就是要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。通常和回调函数与事件处理程序一起使用。通俗来说就是改变this指向。
柯理化函数的思想：
柯理化函数简单的说就是一个大函数返回一个小函数，原理就是利用闭包的机制，把一些内容实现存储和处理了，等到后期需要的时候拿来即用即可 。
举个例子，假如有一个div， div有过一个事件，点击想要执行相应操作。代码如下:
<div class="box" id="box">这是一个盒子</div>
<script>
let obj = {
x: 100
}
function fn (y) {
console.log(y);
this.x += y;
console.log(this);
}
box.onclick = fn;
</script>
柯理化函数1.gif
如上代码，我们想点击box，然后事件会触发，最后打印this。先不考虑别点，我们这么写的想法是想让，this的指向是obj，但是实际的结果却不是，看到控制台打印的结果是box这个元素。
对于这种情况，我们首先想到的就是改变this指向，利用bind，如下:
<div class="box" id="box">这是一个盒子</div>
<script>
let obj = {
x: 100
}
function fn (y) {
console.log(y);
this.x += y;
console.log(this);
}
box.onclick = fn.bind(obj);
</script>
柯理化函数2.gif
这回我们再看一下输出。这回便是我们想要的。但此时没有传参，所有y是MouseEvent，所以传参的话结果如下:
<div class="box" id="box">这是一个盒子</div>
<script>
let obj = {
x: 100
}
function fn (y) {
console.log(y);
this.x += y;
console.log(this);
}
box.onclick = fn.bind(obj,200);
</script>
柯理化函数3.gif
但是有一个问题，这个问题就是bind不兼容IE6/7/8，由此我们能想到的是apply 、call，但它们两个都是将函数改变this指向，并立即执行。
由这个特点。我们不能直接将函数写成如下形式:
<div class="box" id="box">这是一个盒子</div>
<script>
let obj = {
x: 100
}
function fn (y) {
console.log(y);
this.x += y;
console.log(this);
}
box.onclick = fn.call(obj, 200);
</script>
柯理化函数4.gif
这样写的结果，函数被立即执行。这显然不是我们想要的结果。
我们改动一下:
<div class="box" id="box">这是一个盒子</div>
<script>
let obj = {
x: 100
}
function fn (y) {
console.log(y);
this.x += y;
console.log(this);
}
box.onclick = function () {
fn.call(obj, 200);
}
</script>
柯理化函数5.gif
这样的结果我们再来看看。没错，这样依旧符合我们想要的结果。
这个过程我们做了什么呢，我们将点击事件绑定一个匿名函数，这个匿名函数里将函数的this执行改变并执行。这里的实际上是预先处理this,预先传递一些参数，整个操作是让函数在某些情况下才去执行，而不是立即执行。相当于把一些内容或者事情提前处理了，等到需要的时候在拿来用。这也是利用了闭包的保存机制，这个过程就是函数柯理化的思想。
再举另一个例子理解一下。假如一个定时器想要执行1s后执行fn这个方法。
<div class="box" id="box">这是一个盒子</div>
<script>
let obj = {
x: 100
}
function fn (y) {
console.log(y)
this.x += y;
console.log(this);
}
setTimeout(fn, 1000);
</script>
柯理化函数6.gif
上面的写法没办法传参，况且this也不是我们想要的。
改成:
setTimeout(fn(200), 1000);
柯理化函数7.gif
这样虽然传参了，但this依旧不是我们想指向的obj，同时此时是相当于在立即将fn的结果输出而已。如果传参再改变this指向改成一下:
setTimeout(fn.call(obj,200), 1000);
柯理化函数8.gif
这样的结果就是函数会立即执行了，并不是想要的在1s后执行fn函数。
按照上面的思想，思路我们可以改成:
setTimeout(function(){fn.call(obj,200)}, 1000);
柯理化函数9.gif
这样的结果就是1s后执行匿名函数，再执行的同时会将fn执行。
以上的讲解不知你是否对柯理化编程思想时候有一些些的理解。希望对你有所帮助。
听说分享关注的人都年薪百万了
这里是前端扫地僧，和你一起分享前端的那些事。
网友评论