【转载】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 函数柯里化是指参数逐渐求值的过程. 我觉得它是:降低通用性,提高专用性. 通常,柯里化是这样的过程,“ ...
随机推荐
- Android中的AlertDialog使用示例二(普通选项对话框)
在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框,AlertDialog实现方法为建造者模式. ...
- 原生JS获取元素集合的子元素宽度
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...
- JQuery,C#,sqlServer 实现无极限多级树形控件
最近好忙,好长时间没有更新博客了.......... 先看效果图: 此控件利用了 JQuery 插件: treeview google直接搜索就可以找到,这里就不提供链接了. 下载下来的压缩包包括了源 ...
- SQL Server编程入门
SQL编程要比Java编程.C#编程简单许多,下面我们直接讲干货21:04:31 使用变量 局部变量 在T-SQL中,局部变量的名称必须以标记@作为前缀.T-SQL的局部变量其实和Java中的局部变量 ...
- [MySQL性能优化系列]LIMIT语句优化
1. 背景 假设有如下SQL语句: SELECT * FROM table1 LIMIT offset, rows 这是一条典型的LIMIT语句,常见的使用场景是,某些查询返回的内容特别多,而客户端处 ...
- Linux下监控服务器状态命令——top
----------------------------------工作中常用的命令,来判断服务器状态是否正常------------------------------------- top命令作用 ...
- PostgreSQL-角色、库、模式、表
由于不了解postgresql的psql工具,安装完数据库后就直接用pgadmin或navicat来连接操作,在确认初始化后的库中默认有些什么东西后竟然一直无处下手,在还没有了解pg大致体系的情况下搞 ...
- spring quartz定时任务
配置quartz 在spring中需要三个jar包: quartz-1.8.5.jar.commons-collections-3.2.1.jar.commons-logging-1.1.jar 首先 ...
- Euclid求最大公约数
Euclid求最大公约数算法 #include <stdio.h> int gcd(int x,int y){ while(x!=y){ if(x>y) x=x-y; else y= ...
- WPF 无边框透明窗体
WindowStyle="None"--无边框,如果需要其它按钮,如缩小.放大.收缩.关闭按钮,可以自定义 AllowsTransparency="True"- ...