ECMAScript 5(ES5)中bind方法简介备忘
一直以来对和this有关的东西模糊不清,譬如call、apply等等。这次看到一个和bind有关的笔试题,故记此文以备忘。
bind和call以及apply一样,都是可以改变上下文的this指向的。不同的是,call和apply一样,直接引用在方法上,而bind绑定this后返回一个方法,但内部核心还是apply。
直接看例子:
var obj = { a: 1, b: 2, getCount: function(c, d) { return this.a + this.b + c + d; } }; window.a = window.b = 0; console.log(obj.getCount(3, 4)); // 10 var func = obj.getCount; console.log(func(3, 4)); // 7
为何会这样?因为func在上下文中的this是window!bind的存在正是为了改变this指向获取想要的值:
var obj = { a: 1, b: 2, getCount: function(c, d) { return this.a + this.b + c + d; } }; window.a = window.b = 0; var func = obj.getCount.bind(obj); console.log(func(3, 4)); // 10
bind是function的一个函数扩展方法,bind以后代码重新绑定了func内部的this指向(obj),但是不兼容ie6~8,兼容代码如下:
var obj = { a: 1, b: 2, getCount: function(c, d) { return this.a + this.b + c + d; } }; Function.prototype.bind = Function.prototype.bind || function(context) { var that = this; return function() { // console.log(arguments); // console [3,4] if ie<6-8> return that.apply(context, arguments); } } window.a = window.b = 0; var func = obj.getCount.bind(obj); console.log(func(3, 4)); // 10
其实在我看来bind的核心是返回一个未执行的方法,如果直接使用apply或者call:
var ans = obj.getCount.apply(obj, [3, 4]); console.log(ans); // 10
无法使用简写的func函数构造,所以用bind传递this指向,再返回一个未执行的方法,实现方式相当巧妙。
2015-6-10补充:
昨天看到一个bind在代码中的装逼实现。如何用setTimeout连续打印0~9?
以前试过的朋友肯定知道,直接打印是不行的,会打印出一样的数字,这时候就要用闭包了,闭包的话有两种方式,简单实现一种如下:
for(var i = 0; i < 10; i++) { ~function(i) { setTimeout(function() { console.log(i); }, i * 1000); }(i); }
但是居然用bind也能实现:
for(var i = 0; i < 10; i++) { setTimeout(console.log.bind(console, i), i * 1000); }
这样为何也能实现,我也是百思不得其解,只能说不明觉厉。
bind是和apply、call一样,是Function的扩展方法,所以应用场景是func.bind(),而传的参数形式和call一样,第一个参数是this指向,之后的参数是func的实参,fun.bind(thisArg[, arg1[, arg2[, ...]]])。
参考资料:bind
ECMAScript 5(ES5)中bind方法简介备忘的更多相关文章
- simplify the life ECMAScript 5(ES5)中bind方法简介
一直以来对和this有关的东西模糊不清,譬如call.apply等等.这次看到一个和bind有关的笔试题,故记此文以备忘. bind和call以及apply一样,都是可以改变上下文的this指向的.不 ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
- SQL Server修改标识列方法(备忘)
原文:SQL Server修改标识列方法(备忘) SQL Server修改标识列方法 ----允许对系统表进行更新 exec sp_configure 'allow updates',1 reconf ...
- js学习进阶中-bind()方法
有次面试遇到的,也是没说清楚具体的作用,感觉自己现在还是没有深刻的理解! bind():绑定事件类型和处理函数到DOM element(父元素上) live():绑定事件到根节点上,(document ...
- Javascript中bind()方法的使用与实现
对于bind,我愣了下,这个方法常用在jquery中,用于为被选元素添加一个或多个事件处理程序. 查了下手册,发现bind的作用和apply,call类似都是改变函数的execute context, ...
- 理解js中bind方法的使用
提到bind方法,估计大家还会想到call方法.apply方法:它们都是Function对象内建的方法,它们的第一个参数都是用来更改调用方法中this的指向.需要注意的是bind 是返回新的函数,以便 ...
- ES6中。类与继承的方法,以及与ES5中的方法的对比
// 在ES5中,通常使用构造函数方法去实现类与继承 // 创建父类 function Father(name, age){ this.name = name; this.age = age; } F ...
- 通用mapper的增删改查方法 留存 备忘
Mybatis通用Mapper介绍与使用 前言 使用Mybatis的开发者,大多数都会遇到一个问题,就是要写大量的SQL在xml文件中,除了特殊的业务逻辑SQL之外,还有大量结构类似的增删改查SQ ...
- jq中 load()方法 简介
load()方法会在元素的onload事件中绑定一个处理函数.如果处理函数绑定给window对象,则会在所有内容(包括窗口,框架,对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内 ...
随机推荐
- Html之 IFrame使用,注意几点
0x01 iframe的跳出框架 0x02 iframe样式设置 0x03 iframe重置高度 1.首先来一个,跳出iframe的好方法,直接可以在Login.aspx页面使用. if (windo ...
- iOS 点击TextField不弹出软键盘的解决方案
开发中遇到: 在模拟器里面,textfield可以通过电脑键盘输入,可是怎么也不会自动弹出模拟器软键盘 解决方案: 切换一下键盘,command+shift+k,Xcode6.3 中只能是一种输入源
- iOS之 block,代替代理作为回调函数
最近在弄一个视频会议的项目,但今天要说的跟视频基本没关系,我们来说一下在一个view中创建一个button,在controller中加载这个view 当button被点击后将时间响应传递给contro ...
- iOS 系统根据导航栏和状态栏自动修改布局
问题 条件:1.有一个全屏大小的带导航的controller 2.隐藏导航栏,最顶上还会留出状态栏的位置,而不是全屏显示 解决方法 self.automaticallyAdjustsScrollVie ...
- jquery数组删除指定元素的方法:grep()
jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...
- [C#6] 5-自动属性增强
0. 目录 C#6 新增特性目录 1. 老版本代码 internal class Person { public string Name { get; private set; } public in ...
- SQLBackupAndFTP The server principal "NT AUTHORITY\SYSTEM" is not able to access the database "xxxx"
Windows server 2012中使用SQLBackupAndFTP备份数据库时遇到一个错误: ERROR: The server principal "NT AUTHORITY\SY ...
- Tomcat:配置SSL
SSL简述 SSL就是安全套接字层,是一种允许web浏览器和 web服务器通过安全连接通信的技术.这是一个双向的过程,这意味着 服务器和浏览器在发送数据之前加密所有交流的数据. SSL有一个重要的特点 ...
- 关于xml的使用。
使用的常用类: XmlSerializer ParaMapping StreamReader DirectionaryInfo FileInfo using as object 例子: public ...
- linux下重启服务命令
1.查找进程id命令 ps -ef | grep -v grep|grep bdse-tour-service-1.0-jar-with-dependencies.jar | awk '{print ...