javascript中bind绑定接收者与函数柯里化
如果我要遍历一个数组,
我只要给forEach传一个匿名函数即可,很简单;
let arr = ['a', 'b', 'c'];
arr.forEach((item, index) => {
console.log(item);
console.log(index);
})
如果我已经把匿名函数抽象出来,做成了一个公共的方法
(可能其他地方也会用的到)
那么,这个遍历会是这样的;
let arr = ['a', 'b', 'c'];
let myFunc = (item, index) => {
console.log(item);
console.log(index);
}
arr.forEach(myFunc);
注意:只要把方法对象传给forEach就可以喽,参数什么的,根本就不用关心;
如果这个方法在一个对象里,那也没什么问题:
let obj = {
add(param, index) {
console.log(param);
console.log(index)
}
}
let arr = ['a', 'b', 'c'];
arr.forEach(obj.add);
但,如果涉及到对象的this,那就要出问题了:
let obj = {
name: 'allen',
add(param, index) {
console.log(this.name);
console.log(param);
console.log(index)
}
}
let arr = ['a', 'b', 'c'];
arr.forEach(obj.add);
输出:
undefined
a
0
undefined
b
1
undefined
c
2
这是因为,add方法执行的时候,this对象指向的并不是obj,而是forEach的对象,forEach的对象是全局对象golobal;
那想实现意图怎么办呢?
最low的办法就是给forEahc在套一个匿名函数
arr.forEach((item, index) => obj.add(item, index));
其次是给forEach方法再多传递一个参数:
arr.forEach(obj.add, obj);
这也不是什么好主意,forEach你可以多传一个obj进去,其他的类似forEach的方法,可不一定允许你多传一个对象进去哦!
更好的办法是:
arr.forEach(obj.add.bind(obj));
bind创建了一个新函数,这个函数跟obj.add一样,唯一不同的是,新函数把this绑定了obj
也就是说把add方法绑定给了接收者obj;
现在假设我们的add方法,还需要另外一个参数title,而且这是第一个参数:
add(title, param, index) {
console.log(title);
console.log(param);
console.log(index)
}
那该如何是好呢?
你可以直接在bind方法里直接传递这个参数:
arr.forEach(obj.add.bind(obj, "mytitle"));
最终的代码是:
let obj = {
add(title, param, index) {
console.log(title);
console.log(param);
console.log(index)
}
}
let arr = ['a', 'b', 'c'];
arr.forEach(obj.add.bind(obj, "mytitle"));
输出结果是:
mytitle
a
0
mytitle
b
1
mytitle
c
2
将函数与其参数的一个子集绑定的技术称为函数的柯里化;
比起显式的封装函数,这样做更简洁!
(一般人也更不容易看懂你的代码,哈哈哈!)
javascript中bind绑定接收者与函数柯里化的更多相关文章
- 一道javascript面试题(闭包与函数柯里化)
要求写一个函数add(),分别实现能如下效果: (1)console.log(add(1)(2)(3)(4)()); (2)console.log(add(1,2)(3,4)()); (3)conso ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
- JavaScript中的函数柯里化与反柯里化
一.柯里化定义 在计算机科学中,柯里化是把 接受多个参数的函数 变换成 接受一个单一参数(最初函数的第一个参数)的函数 并且返回 接受余下参数且返回结果的新函数的技术 高阶函数 高阶函数是实现柯里化的 ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
- js bind es5函数柯里化
绑定函数 bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.常见的错误就像上面的例子一样,将方法从对象中拿出来,然后调用,并且希望this指向原来的对象. 如果不做特 ...
- 深入理解javascript函数进阶系列第二篇——函数柯里化
前面的话 函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明,而后由著名的数理逻辑学家Haskell Curry将其丰富和发展,currying由此得名.本文将详细 ...
- 精读JavaScript模式(六),Memoization模式与函数柯里化的应用
假期就这么结束了!十天假就有三天在路上,真的难受!想想假期除了看了两场电影貌似也没做什么深刻印象的事情.流浪地球,特效还是很赞,不过对于感情的描写还是逃不掉拖沓和尴尬的通病,对于国产科幻还是抱有支持的 ...
- JavaScript之函数柯里化
什么是柯里化(currying)? 维基百科中的解释是:柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术.意思就是当函 ...
- 简单粗暴详细讲解javascript实现函数柯里化与反柯里化
函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...
随机推荐
- VisualStateManager
管理控件状态和管理控件状态的转换逻辑 <Window.Resources> <Style TargetType="Button" x:Key="Anim ...
- This problem will occur when running in 64 bit mode with the 32 bit Oracle client components installed.
Attempt to load Oracle client libraries threw BadImageFormatException. This problem will occur when ...
- Httpclient Fluent API简单封装
import java.io.IOException;import java.util.ArrayList;import java.util.HashMap;import java.util.List ...
- python socket 客服端服务端编程
客服端编程 import socket try: s = socket.socket(socket.AF_INET, socket.SOCK_STREAM) except socket.error a ...
- 查看window端口占用并结束相关进程
启动cmd命令行 运行netstat –ano,可列出所有端口情况 根据被占用的端口号,比如8081,运行netstat -aon|findstr "8081",找到它对应的PID ...
- Gradle编译失败 generating the main dex list
编译打包的时候出现这个错误,信息很少. * What went wrong: Execution failed for task ':camCard_Asia_Trunk:transformClass ...
- linux服务脚本编写
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- C# 中使用OPenCV(Emgu)心得
原文:C# 中使用OPenCV(Emgu)心得 首先介绍一下自己的情况,2010年的3月份开始接触学习C#编程,之前C#和OpenCV都是零基础,由于全都是自学进度比较慢,中间也走了不少弯路.进过三个 ...
- 实现dropdownList 无刷新
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptMana ...
- C#try catch块
try..catch块的出现是为了异常处理. 格式为:try{...可能发生异常的代码...} catch{...对异常的处理...} finaly{...无论如何都会执行的代码..} 上面的只是一般 ...