JS高阶编程技巧--柯理化函数
首先看一段代码:
let obj = {
x: 100
}; function fn(y) {
this.x += y;
console.log(this);
}
现在有一个需求:在1秒后,执行函数fn,并让其this指向obj。
如果写成
setTimeout(fn, 1000);
这么写的话,fn函数中的this是指向window的,而且也没有传递参数。
如果写成
setTimeout(fn(200), 1000);
这么写的话,this指向依然是window,而且相当于立即执行fn函数,并把结果赋给定时器1秒后再执行,这样肯定不行。
如果写成
setTimeout(fn.call(obj,200), 1000);
这么写的话,用call或apply虽然改变了this指向,但都是函数立即执行并把返回结果赋给了定时器,依然无法完成需求。
如果写成
setTimeout(function() {
fn.call(obj, 200);
}, 1000);
这么写的话,用一个匿名函数包起来,等到1秒后执行匿名函数里边的代码,这样便可以完成上述需求。
从中我们可以看出,在某一个阶段之后执行某些代码,我们需要预先把this指向、参数等预先准备好,这种预先处理的思想即柯理化思想。
当然,这个需求如果用bind写的话,也能实现
setTimeout(fn.bind(obj,200), 1000);
/*
* bind:预先处理内容
* @params
* func:要执行的函数
* context:需要改变的this指向
* args:给函数传递的参数
* @return
* 返回一个代理函数
*/
function bind(func, context, ...args) {
return function proxy() {
func.call(context, ...args); //call和apply兼容低版本IE
};
}
完成最开始的需求
setTimeout(bind(fn, obj, 200), 1000);
理解了这种思想,有助于我们更好的阅读别人的代码,如redux源码中applyMiddleware.js、combineReducers.js等很多都用到了这种方式或思想,以后更有助于我们自己写一些插件、组件等。
JS高阶编程技巧--柯理化函数的更多相关文章
- JS高阶编程技巧--compose函数
先看代码: let fn1 = function (x) { return x + 10; }; let fn2 = function (x) { return x * 10; }; let fn3 ...
- JS高阶编程技巧--惰性函数
在vue.react等框架大量应用之前,我们需要使用jQuery或者原生js来操作dom写代码,在用原生js进行事件绑定时,我们可以应用DOM2级绑定事件的方法,即:元素.addEventListen ...
- JS高阶函数的理解(函数作为参数传递)
JS高阶函数的理解 高阶函数是指至少满足下列条件之一的函数. · 函数可以作为参数被传递 · 函数可以作为返回值输出 一个例子,我们想在页面中创建100个div节点,这是一种写法.我们发现并不是所有用 ...
- React.js高阶函数的定义与使用
/* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...
- react.js 高阶组件----很简单的实例理解高阶组件思想
调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...
- js高阶函数应用—函数柯里化和反柯里化
在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个 ...
- JS高阶函数与函数柯里化
高阶函数 满足下列条件之一的函数: 函数作为参数被传递(如回调函数): 函数可以作为返回值输出: 一些内置高阶函数的例子: Array.prototype.map map()方法通过调用对输入数组中的 ...
- js 高阶函数 闭包
摘自 https://www.cnblogs.com/bobodeboke/p/5594647.html 建议结合另外一篇关于闭包的文章一起阅读:http://www.cnblogs.com/bob ...
- js高阶函数
我是一个对js还不是很精通的选手: 关于高阶函数详细的解释 一个高阶函数需要满足的条件(任选其一即可) 1:函数可以作为参数被传递 2:函数可以作为返回值输出 吧函数作为参数传递,这代表我们可以抽离一 ...
随机推荐
- Hbase与Maven工程的Spring配置笔记
1.HBase基本操作 hbase shell: 连接到正在运行的HBase实例 help: 显示一些基本的使用信息以及命令示例. 需要注意的是: 表名, 行, 列都必须使用引号括起来 create ...
- java内存模型梳理
java内存模型 内存模型和内存结构区别 它们是两个概念. 内存模型是和jvm多线程相关的. 内存结构是指的jvm内存结构. 内存模型的作用 内存模型简称JMM JMM是决定一个线程对共享变量的写入时 ...
- svg微信公众号推文实现点击显示答案
svg微信公众号推文实现点击显示答案 大家都知道微信公众号推文不能写js 所以不能加点击事件 其实是对的 确实不能写js 但是点击事件可以用svg写 svg代码可不会隐蔽 下面我直接贴代码 < ...
- OpenResty学习指南(一)
我的博客: https://www.luozhiyun.com/archives/217 想要学好 OpenResty,你必须理解下面 8 个重点: 同步非阻塞的编程模式: 不同阶段的作用: LuaJ ...
- 深入理解Java虚拟机内存模型
前言 本文中部分内容引用至<深入理解Java虚拟机:JVM高级特性与最佳实践(第2版)>第12章,如果有兴趣可自行深入阅读,文末放有书籍PDF版本连接. 一.物理机中的并发 物理机遇到的并 ...
- Spring boot 学习中代码遇到的几个问题
1.报一大段红错 此时对象还是能创建成功的,解决方案参考链接https://blog.csdn.net/wanglin199709/article/details/99121487 2.无法创建对象 ...
- java12类的无参方法
package com.jh.test01; public class AutoLion { // 属性: 颜色 黄色 String color = "黄色"; // 函数:跑,叫 ...
- sqlserver check running process 1
check process script 1, check which is current running: use master SELECTspid,ER.percent_complete,CA ...
- Shell:setfacl缩小普通用户的权限
简介 我们在使用jumpserver的过程中,会向主机推送普通用户,但普通用户有上传下载文件的权限,要想对这些权限进行管控就比较困难,之前考虑通过将$PATH变量下的命令的权限设置为750,设置完发现 ...
- jquery deferred 转载
阮一峰的网络日志 » 首页 » 档案 JavaScript http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquer ...