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

摘要:
Functionoriginal{this.a=1;this.b=function(){returnthis.a+x}}varobj={a:10}varnewObj=new//实际参数2 console。日志被传入//输出1表示当返回的函数用作构造函数log//时忽略obj。输出3表示导入的实际参数2已导入到原始函数Coriolis中。以上是ES5中绑定方法的特点。该技术也称为函数Coriolisation。当我阅读js权威指南时,我觉得这要求太高了,并忽略了它。最近,我再次遇到了这个概念,我只是打算处理它。bind方法是js中该技术的实践。作为新手,我只使用了bind来设置这个值。这个博客的目的是澄清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, 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的特性。

  原文链接:https://segmentfault.com/a/1190000003963461

免责声明:文章转载自《【转载】JS中bind方法与函数柯里化》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇nginx与nfs在linux系统中安装LANMP下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Web Worker javascript多线程编程(一)

什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验。 一般来说Javascript和UI页面会共用一个线程,在HTML页面中执行js脚本时,页面的状态是不可响应的,直到脚本已完成。而这段代码可以交给Web Worker在后台运行,那么页面在...

【js重学系列】作用域

作用域 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。 在 Javascript 中,作用域分为 全局作用域 和 函数作用域 什么是作用域呢,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。 全局变量 变量在函数外定义,即为全局变量。 全局变量有 全局作用域: 网页中所有脚本和函数均可使...

Chromium base 基础库概览

Chromium 基础库概览 Chromium 基础库包括的内容十分繁杂,我把其中的主要部分大致分为以下几类: 1. 容器类型Chromium 的代码主要使用 STL 容器类型,比如 std::vector,std::list,另外 GCC 和 MSVC 提供的 STL 扩展容器类型 hash_map 和 hash_set 也在 Chromium 中使用...

jQuery 分步引导 插件

转自:http://blog.libnav.com/js/57.html 很多时候一个网站或者一个Web应用出品,为了让你的用户知道你的站点(或应用)有些什么?如何操作?为了让你的用户有更好的体验。往往这个时候都 会给你的站点(应用)添加一个分步指引的效果。然而这样的效果,对于不懂原生js的同学来说,是件蛮头痛的事情。不过大家不要慌,根据 Webreso...

项目中一次排序规则的改动,注意到js中map的遍历的顺序

背景:项目需要对前端页面上某个插件的下拉选择项进行排序,需要按照配置的顺序显示。 首先调查后台,发现sql语句中已经添加order by。之后发现查询结果遍历后封装进HashMap,这里改为LinkHashMap。再之后向前端返回json数据,使用的是net.sf.json.JSONObject,该方法对map进行序列化时是无序的,改用Gson进行序列化。...

留言板小程序开发笔记-4

前端多个html文件, 共用变量的时候, 使用cookie, 或者在多个页面之间通过 url传递变量... 前端多个html页面之间, 可以共用一个css文件, 因为, 在不同的页面包含同一个css文件, 即使另一个页面,不包含某些 dom节点的时候, 它不会出错, 而且也会自动执行. 而多个html文件,共用一个 js 文件时, 由于不同文档的dom结...