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(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...
随机推荐
- WPF 寻找控件模板中的元素
<Window x:Class="Wpf180706.Window10" xmlns="http://schemas.microsoft.com/wi ...
- C++中一个class类对象占用多少内字节(7个例子,很清楚)
一个空的class在内存中多少字节?如果加入一个成员函数后是多大?这个成员函数存储在内存中什么部分? 一个Class对象需要占用多大的内存空间.最权威的结论是: *非静态成员变量总合. *加上编译器为 ...
- 获取同时间段不同的时间 php
/** * 根据指定日期返回经过的年月 * @param string $sDay 开始日期 * @param string $eDay 结束日期 * @returnse multitype:stri ...
- TaskBarProgress(任务栏进度条)
原文:TaskBarProgress(任务栏进度条) </Grid> { { InitializeComponent(); Loaded += } { BackgroundWorker w ...
- Android 查看App冷启动时间/热启动时间/页面打开时间
Android 查看App冷启动时间/热启动时间/页面打开时间 冷启动时间 热启动时间 页面打开时间 通过adb查看 adb shell am start -W packageName/Activit ...
- adb 命令连接指定设备
试用条件: 当有多个设备online时: 步骤: 1. 通过adb devices命令获取所有online设备的serial number C:\Users\Administrator>adb ...
- win10 uwp 萤火虫效果
原文:win10 uwp 萤火虫效果 本文在Nukepayload2指导下,使用他的思想用C#写出来. 本文告诉大家,如何使用 win2d 做出萤火虫效果. 安装 win2d 安装win2d的方法请使 ...
- Android零基础入门第4节:正确安装和配置JDK, 高富帅养成第一招
原文:Android零基础入门第4节:正确安装和配置JDK, 高富帅养成第一招 在前几期中总结分享了Android的前世今生.Android 系统架构和应用组件那些事.带你一起来聊一聊Android开 ...
- RedHat 7.3 修改ASM磁盘绑定路径
RedHat 7中,很多命令发生了改变,绑定磁盘不再是start_udev,而是udevadm,具体绑定方式,请看另一篇博文: http://www.cnblogs.com/zx3212/p/6757 ...
- 漏洞告诉你:商家为什么都乐于提供免(diao)费(yu)WiFi?
作为一名小微商户,每天我除了要为经营小店忙得焦头烂额,还要想方设法地寻求提升用户体验.于是,我用了号称“营销神器”的某商用WiFi系统...... 然后不可思议的事情发生了:连上此WiFi的手机(包括 ...