[Effective JavaScript 笔记]第25条:使用bind方法提取具有确定接收者的方法
js里方法和属性值为函数,就像一个东西两种称呼一个样,比如土豆,也叫马铃薯,一个样。既然一样,那就可以对对象的方法提取出来为函数,然后把提取出来的函数作为回调函数直接传递给高阶函数。
高阶函数是什么
玩过套娃娃游戏没,没玩过,没事,我也没玩过。
大致就是下面这个样子
呃,好吧,这才是真正的。
就是多层函数,以函数为参数或返回值的函数。有点绕,没事看看上面的图就明白了。想了解怎么实现个简单的请点这里。
好了,函数拿出来了,给高阶函数做参数传进去了。
这里面很容易会忘记把传进去的函数绑定到当前对象上,自由惯了,没办法,自由很重要,但没有绑定的对象,你什么都做不了。比如没有女朋友,你就得靠双手了,伤身呀。
一个示例
来看看下面这段代码提提神。
var you={
gF:[],
add:function(s){
this.gF.push(s);
},
all:function(){
return this.gF.join("-");
}
}
比如你不希望一次只交一个女朋友,想同时交往多个。ES5的forEach方法,在每个源数组(多个女朋友)元素上重复地调用add方法(交往),就可以把多个女孩子加到你的后宫了。
var girls=["西施","王昭君","貂蝉","杨贵妃"];//按人物历史出场顺序,呵呵
girls.forEach(you.add);
想想看着四大美人,来出来一见。
you.all();//error:Cannot read property 'push' of undefined
什么都有人呢,都哪去了。
因为you.add的接收者并不是你(you对象)。函数的接收者取决于它是如何被调用的,上面并没有调用它,只是把它传给了高阶函数forEach。但forEach的实现使用全局对象,这个时候你加女朋友变成了,在全世界(window对象)里找gF属性,因为这个gF没有为undefined,所以也就没有push方法,这就报错了。
问题找到了,美女们还往哪里跑~
var girls=["西施","王昭君","貂蝉","杨贵妃"];//按人物历史出场顺序,呵呵
girls.forEach(you.add,you);
you.all();//"西施,王昭君,貂蝉,杨贵妃"
完美运行,是不是想想都美了。
匿名函数
但不是每个高阶函数都像forEach这样善解人意,提供一个其回调函数的接收者。如果遇到个不解风情的函数怎么办?我们可以创建一个调用对象方法的函数来运行。法子如下
var girls=["西施","王昭君","貂蝉","杨贵妃"];//按人物历史出场顺序,呵呵
girls.forEach(function(s){
you.add(s);
});
you.all();//"西施,王昭君,貂蝉,杨贵妃"
好了,事情就这样解决了。
bind方法
NO,还有东西要讲,现在请bind方法全场,它是在ES5标准库才有的函数方法。主要作用就是为函数指定一个对象为其接收者,你也可以理解为,就是指定函数里的this指向哪个对象的。现在就看看上面的情况,bind方法如何解决:
var girls=["西施","王昭君","貂蝉","杨贵妃"];//按人物历史出场顺序,呵呵
girls.forEach(you.add.bind(you));
you.all();//"西施,王昭君,貂蝉,杨贵妃"
怎么样,是不是很牛掰。那bind都弄了啥呢?这里you.add.bind(you)生成了一个全新的函数,这个函数行为和you.add是一致的,但它里把this定死了,死心踏地地就是you了,原来的函数you.add的接收者保持不变。
you.add===you.add.bind(you);//false
这样就可以在很多的场合共享函数了。特别是里面有this关键词的原型方法。只要使用bind就再也不用担心this的指向问题了。不用在外层作用域用变量存储this了。
var obj={
txt:'hello',
sayHello:function(){
console.log(this.txt);
}
}
document.body.onclick=obj.syaHello.bind(obj);//"hello"
事件绑定再也不用担心了。
bind方法在ES5之前需要兼容写法,详细请点击查看。
下面就又到了书上的提示内容了,记住一小点受用很多噢。
提示
注意,提取一个方法不会将方法的接收者绑定到该方法的对象上
当给高阶函数传递对象方法时,使用匿名函数在适当的接收者上调用该方法
使用bind方法创建绑定到适当接收者的函数
附录:这次没有附录,本节里的内容,在之前都有,没有引进新的知识点。
[Effective JavaScript 笔记]第25条:使用bind方法提取具有确定接收者的方法的更多相关文章
- [Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
- [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
- [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象
js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...
- [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符
“1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...
- [Effective JavaScript 笔记]第62条:在异步序列中使用嵌套或命名的回调函数
异步程序的操作顺序 61条讲述了异步API如何执行潜在的代价高昂的I/O操作,而不阻塞应用程序继续处理其他输入.理解异步程序的操作顺序刚开始有点混乱.例如,下面的代码会在打印"finishe ...
- [Effective JavaScript 笔记]第19条:熟练掌握高阶函数
高阶函数介绍 高阶函数曾经是函数式编程的一个概念,感觉是很高深的术语.但开发简洁优雅的函数可以使代码更加简单明了.过去几年中脚本语言采用了这些个技术,揭开了函数式编程的最佳惯用法的神秘面纱.高阶函数就 ...
- [Effective JavaScript 笔记]第20条:使用call方法自定义接收者来调用方法
不好的实践 函数或方法的接收者(即绑定到特殊关键字this的值)是由调用者的语法决定的.方法调用语法将方法被查找的对象绑定到this变量,(可参阅之前文章<理解函数调用.方法调用及构造函数调用之 ...
- [Effective JavaScript 笔记]第21条:使用apply方法通过不同数量的参数调用函数
apply()方法定义 函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同.apply()方法接收两个参数,一个是对象,一个是参数数组. apply()作用 1.用于延长函数 ...
- [Effective JavaScript 笔记]第44条:使用null原型以防止原型污染
第43条中讲到的就算是用了Object的直接实例,也无法完全避免,Object.prototype对象修改,造成的原型污染.防止原型污染最简单的方式之一就是不使用原型.在ES5之前,并没有标准的方式创 ...
随机推荐
- 简单的音乐播放器(VS 2010 + Qt 4.8.5)
昨天历经千辛万苦,配置好了VS 2010中的Qt环境(包括Qt for VS插件),今天决定浅浅地品味一下将两者结合进行编程的魅力. 上网查了一些资料,学习了一些基础知识,决定做一个简单的音乐播放器, ...
- 24.C#LINQ TO XML(十二章12.3)
自己也写了那么多,但还有很多不懂,有点浮躁吧,但饭还是要吃啊,说说LINQ TO XML吧. LINQ TO XML位于System.Xml.Linq程序集,并且大多数类型位于System.Xml.L ...
- android常用的弹出提示框
我们在平时做开发的时候,免不了会用到各种各样的对话框,相信有过其他平台开发经验的朋友都会知道,大部分的平台都只提供了几个最简单的实现,如果我们想实现自己特定需求的对话框,大家可能首先会想到,通过继承等 ...
- z-index详解
来源于:http://www.cnblogs.com/ForEvErNoME/p/3373641.html 概念 z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的 ...
- BZOJ1093 最大半连通子图
Description 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意 两点u,v,存在一条u到v的有向路径或者从v到 ...
- KTHREAD 线程调度 SDT TEB SEH shellcode中DLL模块机制动态获取 《寒江独钓》内核学习笔记(5)
目录 . 相关阅读材料 . <加密与解密3> . [经典文章翻译]A_Crash_Course_on_the_Depths_of_Win32_Structured_Exception_Ha ...
- java反射学习
通过一个对象获得完整的包名和类名 package reflect; public class GetClass { public static void main(String[] args) { G ...
- jsp学习(三)
<%@page contentType="text/html;charset=gbk"%> <html> <body> <font siz ...
- jquery ajax 应用返回类型是html json
jquery ajax 例子: function JudgeUserName() { $.ajax({ type:"GET&q ...
- Java中各种(类、方法、属性)访问修饰符与修饰符的说明
类: 访问修饰符 修饰符 class 类名称 extends 父类名称 implement 接口名称 (访问修饰符与修饰符的位置可以互换) 访问修饰符 名称 说明 备注 public 可以被本项目的所 ...