资讯专栏INFORMATION COLUMN

JS中bind方法与函数柯里化

wua_wua2012 / 1305人阅读

摘要:手贱搜了下函数柯里化,结果搜出腾讯的一篇反柯里化的文章中有趣的反柯里化技术,又牺牲不少脑细胞,赶紧吃饭,饿死了

原生bind方法

不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情况戳这里ECMAScript 5 compatibility table),权威指南上提到在ES3中利用apply模拟该方法的实现(JS权威指南中函数那章), 但无法真实还原该方法, 这也是真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, 1); //让this指向null,其后的实参也会作为实参传入被绑定的函数sum

succ(2) // => 3:  可以看到1绑定到了sum函数中的x

其次, bind()方法所返回的函数的length(形参数量)等于原函数的形参数量减去传入bind()方法中的实参数量(第一个参数以后的所有参数),因为传入bind中的实参都会绑定到原函数的形参,吗的,绕死了, 举个栗子:

function  func(a,b,c,d){...} //func的length为4

var after = func.bind(null,1,2)  //这里输入了两个实参(1,2)绑定到了func函数的a,b

console.log(after.length) //after的length为 2
 

第三,当bind()所返回的函数用作构造函数的时候, 传入bind()的this将被忽略,实参会全部传入原函数,这样说很抽象, 举个栗子?

function original(x){
  this.a=1;
  this.b =function(){return this.a + x}
}
var obj={
  a:10
}
var  newObj = new (original.bind(obj,2)) //传入了一个实参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的特性。

手贱搜了下函数柯里化,结果搜出腾讯的一篇反柯里化的文章(Javascript中有趣的反柯里化技术), 又牺牲不少脑细胞,赶紧吃饭,饿死了~~~~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86137.html

相关文章

  • JS柯里

    摘要:作为函数式编程语言,带来了很多语言上的有趣特性,比如柯里化和反柯里化。个人理解不知道对不对延迟执行柯里化的另一个应用场景是延迟执行。不断的柯里化,累积传入的参数,最后执行。 作为函数式编程语言,JS带来了很多语言上的有趣特性,比如柯里化和反柯里化。 这里可以对照另外一篇介绍 JS 反柯里化 的文章一起看~ 1. 简介 柯里化(Currying),又称部分求值(Partial Evalu...

    Hancock_Xu 评论0 收藏0
  • JS函数式编程 - 函数组合柯里

    摘要:而在函数式编程中方法是独立于数据的,我们可以把上面以函数式的方式在写一遍你肯定会说,你是在逗我。对比两个生成新函数的过程,没有柯里化的相对而言就有一点啰嗦了。 我们都知道单一职责原则,其实面向对象的SOLID中的S(SRP, Single responsibility principle)。在函数式当中每一个函数就是一个单元,同样应该只做一件事。但是现实世界总是复杂的,当把现实世界映射...

    MingjunYang 评论0 收藏0
  • JS进阶篇--JS柯里(currying)

    摘要:何为化柯里化化来源与数学家的名字编程语言也是以他的名字命名。因此柯里化的过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程。当在多次调用同一个函数,并且传递的参数绝大多数是相同的,那么该函数可能是一个很好的柯里化候选。 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字命名)。 柯里化通常也称部分求值,其...

    young.li 评论0 收藏0
  • JavaScript 函数式编程技巧 - 柯里

    摘要:作为函数式编程语言,带来了很多语言上的有趣特性,比如柯里化和反柯里化。在一些函数式编程语言中,会定义一个特殊的占位变量。个人理解不知道对不对延迟执行柯里化的另一个应用场景是延迟执行。不断的柯里化,累积传入的参数,最后执行。作为函数式编程语言,JS带来了很多语言上的有趣特性,比如柯里化和反柯里化。 这里可以对照另外一篇介绍 JS 反柯里化 的文章一起看~ 1. 简介 柯里化(Currying)...

    edgardeng 评论0 收藏0
  • 邂逅函数柯里

    摘要:柯里化函数的作用函数柯里化允许和鼓励你分隔复杂功能变成更小更容易分析的部分。指向的是调用方法的一个函数,绑定,延迟执行可见,之后返回的是一个延迟执行的新函数关于性能的备注通常,使用柯里化会有一些开销。 引子 有这样一道题目,实现一个函数,实现如下功能: var result = sum(1)(2)(3); console.log(result);//6 这道题目,印象中是一道技术笔试...

    Kross 评论0 收藏0

发表评论

0条评论

wua_wua2012

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<