如果我要遍历一个数组,
我只要给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绑定接收者与函数柯里化的更多相关文章

  1. 一道javascript面试题(闭包与函数柯里化)

    要求写一个函数add(),分别实现能如下效果: (1)console.log(add(1)(2)(3)(4)()); (2)console.log(add(1,2)(3,4)()); (3)conso ...

  2. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  3. JavaScript中的函数柯里化与反柯里化

    一.柯里化定义 在计算机科学中,柯里化是把 接受多个参数的函数 变换成 接受一个单一参数(最初函数的第一个参数)的函数 并且返回 接受余下参数且返回结果的新函数的技术 高阶函数 高阶函数是实现柯里化的 ...

  4. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  5. js bind es5函数柯里化

    绑定函数 bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.常见的错误就像上面的例子一样,将方法从对象中拿出来,然后调用,并且希望this指向原来的对象. 如果不做特 ...

  6. 深入理解javascript函数进阶系列第二篇——函数柯里化

    前面的话 函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明,而后由著名的数理逻辑学家Haskell Curry将其丰富和发展,currying由此得名.本文将详细 ...

  7. 精读JavaScript模式(六),Memoization模式与函数柯里化的应用

    假期就这么结束了!十天假就有三天在路上,真的难受!想想假期除了看了两场电影貌似也没做什么深刻印象的事情.流浪地球,特效还是很赞,不过对于感情的描写还是逃不掉拖沓和尴尬的通病,对于国产科幻还是抱有支持的 ...

  8. JavaScript之函数柯里化

    什么是柯里化(currying)? 维基百科中的解释是:柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术.意思就是当函 ...

  9. 简单粗暴详细讲解javascript实现函数柯里化与反柯里化

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...

随机推荐

  1. VC++中的C运行时库浅析(控制台程序默认使用单线程的静态链接库,而MFC中的CFile类已暗藏了多线程)

    1.概论 运行时库是程序在运行时所需要的库文件,通常运行时库是以LIB或DLL形式提供的.C运行时库诞生于20世纪70年代,当时的程序世界还很单纯,应用程序都是单线程的,多任务或多线程机制在此时还属于 ...

  2. 将RDL报表转换成RDLC报表的函数

    原文:将RDL报表转换成RDLC报表的函数 近日研究RDLC报表,发现其不能与RDL报表兼容,尤其是将RDL报表转换成RDLC报表.网上的资料贴出的的转换方式复杂且不切实际,遂决定深入研究.经研究发现 ...

  3. Delphi中的线程类 - TThread详解

    Delphi中的线程类 - TThread详解 2011年06月27日 星期一 20:28 Delphi中有一个线程类TThread是用来实现多线程编程的,这个绝大多数Delphi书藉都有说到,但基本 ...

  4. delphi中使用词霸2005的动态库XdictGrb.dll实现屏幕取词

    近日来,在网上发现关于屏幕取词技术的捷径,搜索很长时间,发现实现方式以VB出现的居多,但是通过Delphi来实现的却好象没有看到,自己参考着VB的相关代码琢磨了一下通过delphi来实现的方式. 其实 ...

  5. js 跨域访问 获取验证码图片 获取header 自定义属性

    1.net core web api 后端 /// <summary> /// 图形验证码 /// </summary> [HttpGet] public IActionRes ...

  6. 【Gerrit】持续集成工具Jenkins的安装配置与使用过程中遇到的问题整理

    1.下载war包 https://jenkins.io/download/ 2.安装 java -jar jenkins.war Error: Feb 21, 2019 2:17:25 AM wins ...

  7. Win8 Metro(C#)数字图像处理--2.63图像指数增强

    原文:Win8 Metro(C#)数字图像处理--2.63图像指数增强  [函数名称]   指数增强      WriteableBitmap IndexenhanceProcess(Writea ...

  8. ARTS 12.31 - 1.4

    Algorithm 这是一道需要用动态规划的问题.求字符串的最长回文子序列. 复习了一遍动态规划,重点是要分析出最优解所包含的子问题的最优解,把过程描述为数学公式. 题目https://leetcod ...

  9. 微信小程序把玩(二十五)loading组件

    原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <butt ...

  10. SkyDrive开发申请ClientID

    申请地址: http://go.microsoft.com/fwlink/p/?LinkId=193157 注意:在创建完成一个你的应用实例后,有一个很重要的任务需要你去完成. 那就是在你创建的应用实 ...