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; ...
随机推荐
- Java知识整理一
文档二 密码:java
- JAVA-6-简单的模拟ATM使用
public static void main(String[] args) { in = new Scanner(System.in); int count = 1; int pwd = 11111 ...
- C/C++默认浮点型
代码: #include <iostream> #include <cstdio> using namespace std; void test(int a){ cout< ...
- [译] 什么是移动友好的 - Mobile-friendliness
什么是移动友好的? 移动友好到底意味着什么取决于您与谁讨论它. 我们不妨这样理解: 移动友好的设计以 表现力, 内容和性能 三方面为目标来改善用户体验. 表现力 - Presentation ...
- thinkphp3.23整合phpexcel
HINKPHP3.2.3整合PHPexcel实现数据的导入导出.可以上传excel文件后批量导入到数据库,兼容.xls和.xlsx格式:数据库里的数据可以按照搜索条件和分页导出为excel文件.最近接 ...
- windows编辑文本和unix编辑文本的回车符问题
我们的开发环境一般都使用windows操作系统,而测试环境和线上环境一般使用linux.windows下编辑的shell脚本,上传到windows下会发生错误.出现两种情况: 1.BOM头问题,前面有 ...
- install pip3 for python 3.x
前言: 我目前使用的服务器为centos6.x 系统自带的python的版本为2.6.x,但是目前无论是学习还是使用python,python3都是首选,那么问题来了.---如何安装python3环境 ...
- Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Rand forest 和 gradient boosting的区别
引自http://blog.csdn.net/xianlingmao/article/details/7712217 Jackknife,Bootstraping, bagging, boosting ...
- 转:Node.js软肋之CPU密集型任务
文章来自于:http://www.infoq.com/cn/articles/nodejs-weakness-cpu-intensive-tasks Node.js在官网上是这样定义的:“一个搭建在C ...
- 子句判断、启动强度和去模糊化--AForge.NET框架的使用(三)
原文:子句判断.启动强度和去模糊化--AForge.NET框架的使用(三) 使用AForge.NET进行模糊运算 上一篇说来一些模糊运算的数学问题,用AForge.NET做相关运算就很简单了. 1.联 ...