【转载】JS中bind方法与函数柯里化
原生bind方法
不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情况戳这里ECMAScript 5 compatibility table),权威指南上提到在ES3中利用apply模拟该方法的实现(JS权威指南中函数那章), 但无法真实还原该方法, 这也是真bind方法中的有趣特性。
(原文这边理解有问题, 这段话的意思如果结合犀牛书上下文的意思, 再结合犀牛书中bind()方法实现, 是说把bind()方法第一个参数以后的所有参数作为返回函数的起始实参)首先bind不同于call和apply只是单纯地设置this的值后传参,它还会将所有传入bind()方法中的实参(第一个参数之后的参数)与this一起绑定,我个人的理解是其后的参数也会作为绑定上下文的一部分,以下为《js权威指南》原文的说法:
The ECMAScript 5 bind() method does more than just bind a function to an object. It also performs partial application: any arguments you pass to bind() after the first are bound along with the this value.
关于这个特性看《权威指南》原文的栗子:
var sum = function(x,y) { return x + y };
var succ = sum.bind(null, ); //让this指向null,其后的实参也会作为实参传入被绑定的函数sum
succ() // => 3: 可以看到1绑定到了sum函数中的x
其次, bind()方法所返回的函数的length(形参数量)等于原函数的形参数量减去传入bind()方法中的实参数量(就是剩下没有传的参数),因为传入bind中的实参都会绑定到原函数的形参,吗的,绕死了, 举个栗子:
function func(a,b,c,d){...} //func的length为4
var after = func.bind(null,,) //这里输入了两个实参(1,2)绑定到了func函数的a,b
console.log(after.length) //after的length为 2
第三,当bind()所返回的函数用作构造函数的时候, 传入bind()的this将被忽略,实参会全部传入原函数,这样说很抽象, 举个栗子?
function original(x){
this.a=;
this.b =function(){return this.a + x}
}
var obj={
a:
}
var newObj = new (original.bind(obj,)) //传入了一个实参2
console.log(newObj.a) //输出 1, 说明返回的函数用作构造函数时obj(this的值)被忽略了
console.log(newObj.b()) //输出3 ,说明传入的实参2传入了原函数original
函数柯里话的概念
以上就是ES5中bind方法的特性, 这种技术也被称为函数柯里化,在看《js权威指南》的时候感觉这玩意逼格太高直接忽略了,最近又碰到这概念, 索性打算搞定他。
函数柯里化在百科的解释为:
在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的,尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。
以上翻译成人话就是:这种技术将多个参数的函数变成只带一个参数的函数。bind方法就是该技术在js中的实践。作为一个菜鸟, 目前只用过bind设置this的值, 码这篇博客的目的就是厘清下bind的特性。
原文链接:https://segmentfault.com/a/1190000003963461
【转载】JS中bind方法与函数柯里化的更多相关文章
- js高阶函数应用—函数柯里化和反柯里化(二)
第上一篇文章中我们介绍了函数柯里化,顺带提到了偏函数,接下来我们继续话题,进入今天的主题-函数的反柯里化. 在上一篇文章中柯里化函数你可能需要去敲许多代码,理解很多代码逻辑,不过这一节我们讨论的反科里 ...
- 简单粗暴详细讲解javascript实现函数柯里化与反柯里化
函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...
- React-高阶函数_函数柯里化
高阶函数_函数柯里化 高阶函数(定义) 如果一个函数符合下面两个规范,就是高阶函数: 如果A函数,接收的参数是一个函数,那么A就是一个高阶函数(比如数组方法arr.map()接收的就是一个处理item ...
- js bind es5函数柯里化
绑定函数 bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.常见的错误就像上面的例子一样,将方法从对象中拿出来,然后调用,并且希望this指向原来的对象. 如果不做特 ...
- JavaScript中的函数柯里化与反柯里化
一.柯里化定义 在计算机科学中,柯里化是把 接受多个参数的函数 变换成 接受一个单一参数(最初函数的第一个参数)的函数 并且返回 接受余下参数且返回结果的新函数的技术 高阶函数 高阶函数是实现柯里化的 ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
- 前端面试手写代码——JS函数柯里化
目录 1 什么是函数柯里化 2 柯里化的作用和特点 2.1 参数复用 2.2 提前返回 2.3 延迟执行 3 封装通用柯里化工具函数 4 总结和补充 1 什么是函数柯里化 在计算机科学中,柯里化(Cu ...
- 手写系列:call、apply、bind、函数柯里化
少废话,show my code call 原理都在注释里了 // 不覆盖原生call方法,起个别名叫myCall,接收this上下文context和参数params Function.prototy ...
- [转]js函数式变成之函数柯里化
本文转自:https://segmentfault.com/a/1190000003733107 函数柯里化是指参数逐渐求值的过程. 我觉得它是:降低通用性,提高专用性. 通常,柯里化是这样的过程,“ ...
随机推荐
- 了解HTML CSS格式化排版 文字排版
这里简单的写一些涉及到字体排版中常用到的属性, 大家可以学习查看, 也可以mark下以后看. font-family: "Micrsoft Yahei"; 设置字体 font-si ...
- AndroidStudio配置gradle,让App自动签名
最近开发关于微信一系列功能,发现分享.支付必须要打包签名才能测试,太耽误事了,耗时耗力...在网上扒拉扒拉资料,发现有很多前辈都处理过类似问题,非常感谢大家的分享,参考链接:http://blog.c ...
- xp
微软MSDN Windows XP Professional下载 Windows XP Professional 简体中文 (最原始版本,无SP)[505.63MB] 文件名:CN_WINXP_PRO ...
- Play Framework 完整实现一个APP(十)
1.定制Comment列表 新增加Comment list页面,执行命令行 > play crud:ov --template Comments/list 会生成/app/views/Comme ...
- Cucumber测试驱动开发
Cucumber是一种BDD实践开发工具,属于敏捷开发的组成部分. 在敏捷开发中,对用户进行需求分析时,不是像传统的P&D的开发方式,首先编写大量的用户需求分析文档,而是通过一个个 ...
- Oracle如何实现创建数据库、备份数据库及数据导出导入的一条龙操作
Oracle中对数据对象和数据的管理,无疑都是使用PL/SQL Developer来进行管理,该工具也提供给我们很多方便.快捷的操作,使得我们不再为Oracle本身丑陋.难用的UI而抱怨.由于我们一般 ...
- android ListView 属性
android:divider="#fffff" 分割线颜色 android:dividerHeight="1px" 分割线高度 divider 分割线-去掉分 ...
- js中取得当前加载的js的src地址
在很多js框架中看到过,如果要动态加载框架内部的其他js,加载的时候加载的地址经常是一个相对的地址,只能是这样了哦,因为框架根本不知道用此框架的用户,将框架js文件放的具体目录,所以框架中一般会采用如 ...
- Nginx中的一些匹配顺序
Nginx中经常需要做各种配置,总结如下: 1.server_name配置 nginx中的server_name指令主要用于配置基于名称虚拟主机,同一个Nginx虚拟主机中,可以绑定多个server_ ...
- [WPF系列]-DataBinding(数据绑定) 自定义Binding
自定义Binding A base class for custom WPF binding markup extensions BindingDecoratorBase Code: public c ...