js里方法和属性值为函数,就像一个东西两种称呼一个样,比如土豆,也叫马铃薯,一个样。既然一样,那就可以对对象的方法提取出来为函数,然后把提取出来的函数作为回调函数直接传递给高阶函数。

高阶函数是什么

玩过套娃娃游戏没,没玩过,没事,我也没玩过。
大致就是下面这个样子

呃,好吧,这才是真正的。

就是多层函数,以函数为参数或返回值的函数。有点绕,没事看看上面的图就明白了。想了解怎么实现个简单的请点这里
好了,函数拿出来了,给高阶函数做参数传进去了。
这里面很容易会忘记把传进去的函数绑定到当前对象上,自由惯了,没办法,自由很重要,但没有绑定的对象,你什么都做不了。比如没有女朋友,你就得靠双手了,伤身呀。

一个示例

来看看下面这段代码提提神。

  1. var you={
  2. gF:[],
  3. add:function(s){
  4. this.gF.push(s);
  5. },
  6. all:function(){
  7. return this.gF.join("-");
  8. }
  9. }

比如你不希望一次只交一个女朋友,想同时交往多个。ES5的forEach方法,在每个源数组(多个女朋友)元素上重复地调用add方法(交往),就可以把多个女孩子加到你的后宫了。

  1. var girls=["西施","王昭君","貂蝉","杨贵妃"];//按人物历史出场顺序,呵呵
  2. girls.forEach(you.add);

想想看着四大美人,来出来一见。

  1. you.all();//error:Cannot read property 'push' of undefined

什么都有人呢,都哪去了。
因为you.add的接收者并不是你(you对象)。函数的接收者取决于它是如何被调用的,上面并没有调用它,只是把它传给了高阶函数forEach。但forEach的实现使用全局对象,这个时候你加女朋友变成了,在全世界(window对象)里找gF属性,因为这个gF没有为undefined,所以也就没有push方法,这就报错了。
问题找到了,美女们还往哪里跑~

  1. var girls=["西施","王昭君","貂蝉","杨贵妃"];//按人物历史出场顺序,呵呵
  2. girls.forEach(you.add,you);
  3. you.all();//"西施,王昭君,貂蝉,杨贵妃"

完美运行,是不是想想都美了。

匿名函数

但不是每个高阶函数都像forEach这样善解人意,提供一个其回调函数的接收者。如果遇到个不解风情的函数怎么办?我们可以创建一个调用对象方法的函数来运行。法子如下

  1. var girls=["西施","王昭君","貂蝉","杨贵妃"];//按人物历史出场顺序,呵呵
  2. girls.forEach(function(s){
  3. you.add(s);
  4. });
  5. you.all();//"西施,王昭君,貂蝉,杨贵妃"

好了,事情就这样解决了。

bind方法

NO,还有东西要讲,现在请bind方法全场,它是在ES5标准库才有的函数方法。主要作用就是为函数指定一个对象为其接收者,你也可以理解为,就是指定函数里的this指向哪个对象的。现在就看看上面的情况,bind方法如何解决:

  1. var girls=["西施","王昭君","貂蝉","杨贵妃"];//按人物历史出场顺序,呵呵
  2. girls.forEach(you.add.bind(you));
  3. you.all();//"西施,王昭君,貂蝉,杨贵妃"

怎么样,是不是很牛掰。那bind都弄了啥呢?这里you.add.bind(you)生成了一个全新的函数,这个函数行为和you.add是一致的,但它里把this定死了,死心踏地地就是you了,原来的函数you.add的接收者保持不变。

  1. you.add===you.add.bind(you);//false

这样就可以在很多的场合共享函数了。特别是里面有this关键词的原型方法。只要使用bind就再也不用担心this的指向问题了。不用在外层作用域用变量存储this了。

  1. var obj={
  2. txt:'hello',
  3. sayHello:function(){
  4. console.log(this.txt);
  5. }
  6. }
  7. document.body.onclick=obj.syaHello.bind(obj);//"hello"

事件绑定再也不用担心了。
bind方法在ES5之前需要兼容写法,详细请点击查看
下面就又到了书上的提示内容了,记住一小点受用很多噢。

提示

  • 注意,提取一个方法不会将方法的接收者绑定到该方法的对象上

  • 当给高阶函数传递对象方法时,使用匿名函数在适当的接收者上调用该方法

  • 使用bind方法创建绑定到适当接收者的函数

附录:这次没有附录,本节里的内容,在之前都有,没有引进新的知识点。

[Effective JavaScript 笔记]第25条:使用bind方法提取具有确定接收者的方法的更多相关文章

  1. [Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码

    函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...

  2. [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

  3. [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  4. [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  5. [Effective JavaScript 笔记]第62条:在异步序列中使用嵌套或命名的回调函数

    异步程序的操作顺序 61条讲述了异步API如何执行潜在的代价高昂的I/O操作,而不阻塞应用程序继续处理其他输入.理解异步程序的操作顺序刚开始有点混乱.例如,下面的代码会在打印"finishe ...

  6. [Effective JavaScript 笔记]第19条:熟练掌握高阶函数

    高阶函数介绍 高阶函数曾经是函数式编程的一个概念,感觉是很高深的术语.但开发简洁优雅的函数可以使代码更加简单明了.过去几年中脚本语言采用了这些个技术,揭开了函数式编程的最佳惯用法的神秘面纱.高阶函数就 ...

  7. [Effective JavaScript 笔记]第20条:使用call方法自定义接收者来调用方法

    不好的实践 函数或方法的接收者(即绑定到特殊关键字this的值)是由调用者的语法决定的.方法调用语法将方法被查找的对象绑定到this变量,(可参阅之前文章<理解函数调用.方法调用及构造函数调用之 ...

  8. [Effective JavaScript 笔记]第21条:使用apply方法通过不同数量的参数调用函数

    apply()方法定义 函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同.apply()方法接收两个参数,一个是对象,一个是参数数组. apply()作用 1.用于延长函数 ...

  9. [Effective JavaScript 笔记]第44条:使用null原型以防止原型污染

    第43条中讲到的就算是用了Object的直接实例,也无法完全避免,Object.prototype对象修改,造成的原型污染.防止原型污染最简单的方式之一就是不使用原型.在ES5之前,并没有标准的方式创 ...

随机推荐

  1. 浅析C#中的“==”和Equals

    1.“==”和Equals两个真的有关联吗? 对于“==”和Equals大多数网友都是这样总结的: “==” 是比较两个变量的值相等. Equals是比较两个变量是否指向同一个对象. 如:这篇文章,并 ...

  2. php上传图片---初级版

    没有样式,没有淘宝的那种放大截取大小的效果,只是实现了图片上传的功能. 图片超过100k,会出现内部错误服务器错误,需要手动更改配置文件里的MaxRequestLen属性. 下面粘上代码: <? ...

  3. servlet请求转发、包含以及重定向

    请求转发: 方式一: ServletContext对象.getRequestDispatcher(目标资源的URI).forward(request,response); 目标资源的URI " ...

  4. 记<<ssh穿透防火墙连接内网的机器(不用路由端口映射)>>

    场景: 在家连接公司的内网服务器. 需求: 不用设置端口映射在家用putty登录公司内网服务器. 条件: 有一台公网服务器做转发,有开放端口的控制权.(公网服务器可以是阿里云ECS, 腾讯云主机这样的 ...

  5. log4js

    这一篇足够:转载:http://www.cnblogs.com/Joans/p/4092293.html 代码贴出来吧: log.js var log4js = require('log4js'); ...

  6. [bzoj 2005][NOI 2010]能量采集(容斥原理+递推)

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2005 分析:首先易得ans=∑gcd(x,y)*2+1 然后我就布吉岛了…… 上网搜了下题解, ...

  7. jQuery应用之(一)使用jQuery选择器(荐)

    如上文(地址)jQuery预先的javascript的编程,提供了计划所有css3下的标准选择器,开发者可以利用这些选择器轻松选择各种元素,供javascript使用. 重要的是jQuery对这些选择 ...

  8. formData_html5_map标签

    1 : //更省事 var files = fileInput.files; var formData = new FormData(); //将所有文件插入formData formData .ap ...

  9. Http状态码集合

    忘了之前在哪里收集的了,先表示感谢. 状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请 ...

  10. 高斯混合聚类及EM实现

    一.引言 我们谈到了用 k-means 进行聚类的方法,这次我们来说一下另一个很流行的算法:Gaussian Mixture Model (GMM).事实上,GMM 和 k-means 很像,不过 G ...