Function.prototype.bind
解析Function.prototype.bind
简介
对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数。
bind的作用
bind最直接的作用就是改变this的指向

// 定义函数
var checkNumericRange = function (value) {
if (typeof value !== 'number')
return false;
else
return value >= this.minimum && value <= this.maximum;
} // 定义对象
var range = { minimum: 10, maximum: 20 };

这时就会碰到一个问题,因为作用域不符,checkNumricRange不能操作range对象的属性。
那我们该如何做呢?
答案是修改this的值。把函数内部的this修改为range对象,这样这个函数就可以访问range的属性。
通过bind可以很好的实现。
// 限定函数的this值为range,返回一个新的函数
var boundCheckNumericRange = checkNumericRange.bind(range); // 使用新生成的函数。
var result = boundCheckNumericRange (12);
document.write(result);// true
让我们分析分析checkNumricRange.bind(range)都做了什么?
通过bind方法,将this的值修改为range对象,返回一个新函数,这个函数this值是range,但函数的功能没有改变。
Function.prototype.bind原理解析
内部原理有一点点绕人,
下面给出一个简化的bind代码,
Function.prototype.bind = function (scope) {
var fn = this;//这里fn为this,也就是调用bind的函数,方便下面调用
return function () {//返回的是一个可以运行函数
return fn.apply(scope);//利用apply方法,使用scope对象调用fn,
};
}
一个简单的测试用例

var foo = {
x: 3
} var bar = function(){
console.log(this.x);
} bar(); // undefined var boundFunc = bar.bind(foo); boundFunc(); // 3

具体适用情况
1.在事件监听时,简化在触发事件时用匿名函数的情况
这是一个用来处理和保存数据的计数器
var logger = {
x: 0,
updateCount: function(){this.x++;
console.log(this.x);
}
}
一般经常使用以下情况去运行方法updateCount,
添加一个匿名函数,然后用logger对象调用方法updateCount,以保证updateCount里可以通过this访问logger.
document.getElementsByTagName("button")[0].addEventListener("click",function(){
logger.updateCount();
})
但是现在我们可以是用bind简化这个内容。
document.getElementsByTagName("button")[0].addEventListener("click",logger.updateCount.bind(logger))
Function.prototype.bind的更多相关文章
- 一起Polyfill系列:Function.prototype.bind的四个阶段
昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧. 一.Function.prototype.bind的作用 其实 ...
- Function.prototype.bind接口浅析
本文大部分内容翻译自 MDN内容, 翻译内容经过自己的理解. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Glo ...
- JavaScript 函数绑定 Function.prototype.bind
ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...
- 解析Function.prototype.bind
简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. bind的作用 bind最直接的作用就是改变this的 ...
- javascript Function.prototype.bind
语法: fn.bind(obj,arg1,arg2,arg3...) bind是es5新增的方法,顾名思义,它的作用是将函数绑定到某个对象上,就像是某个对象调用方法一样.其本质还是改变了该函数的上下文 ...
- 理解javascript中的Function.prototype.bind
在初学Javascript时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象this时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将this赋值给一个变量(比如 ...
- 浅析 JavaScript 中的 Function.prototype.bind() 方法
Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...
- 理解 JavaScript 中的 Function.prototype.bind
函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其 ...
- prototype.js中Function.prototype.bind方法浅解
prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...
随机推荐
- zepto源码研究 - zepto.js - 1
简要:网上已经有很多人已经将zepto的源码研究得很细致了,但我还是想写下zepto源码系列,将别人的东西和自己的想法写下来以加深印象也是自娱自乐,文章中可能有许多错误,望有人不吝指出,烦请赐教. 首 ...
- C#01
C#语言 求4名同学三门成绩的平均值 using System; using System.Collections.Generic; using System.Linq; using System.T ...
- QT学习篇:入门(1)
第一个为管理界面: (1)安全库存的设置,包括序号.物品代码.物品类型.最大库存量.最小库存量.最大库存比率.最小库存比率: (2)计算频率设置,包括:实时,定时(单位分为:分钟.小时.天),来自gl ...
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结【转载】
详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,d ...
- ECSTORE 关于前台页面DIALOG的调用
在需调用dialog的html页面中插入本段代码. link='<{link app=test ctl=site_test act=abc}>'; var dialog = new Dia ...
- shell如何生成rpm包仓库列表文件的对比结果
基本步骤: 1.切换至仓库目录RPM_LIST_DIR1和RPM_LIST_DIR2 2.ls列出仓库的rpm包文件并分别重定向至输出文件rpm_list_file1和rpm_list_file2 3 ...
- Drag & Drop and File Reader
参考 : http://www.html5rocks.com/zh/tutorials/file/dndfiles/ http://blog.csdn.net/rnzuozuo/article/det ...
- Powershell错误处理,try catch finally
脚本的调试向来是一个艰巨的任务,在powershell出现以前简直是一场灾难.在powershell中微软终于做出了诸多改进,不但有了$Error.-whatif,也有了ISE.而在语法上也增加了tr ...
- android中使用PopupWindow实现弹出窗口菜单
结合上篇android中使用ViewPager实现图片拖动,我们实现了点击“帮助”按钮的功能,这一篇则是接着上一篇,让我们一起来完成“我的”按钮的功能,这一功能,则是使用PopupWindow来实现弹 ...
- db file scattered read
SQL> set linesize 200 SQL> col name format a30 SQL> select SESSION_ID,NAME,P1,P2,P3,WAIT_TI ...