解析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(); //
具体适用情况
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的更多相关文章
- Function.prototype.bind
解析Function.prototype.bind 简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. b ...
- 一起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 ...
- 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; ...
随机推荐
- js操作符
JS操作符 x + y(数字) 将x和y相加; x + y(字符串) 将x和y拼接在一起; x - y 从x中减去y; x * y 将x和y相乘; x / y 将x除以y; x % y x和y的模(既 ...
- 发布到IIS后 程序乱码
网站-功能视图-.net全球化 编码设置 请求:utf-8 文件:gb2312 响应:utf-8 响应头:utf-8 可以根据需要自己定义
- 常见Oracle数据库问题总结及解决办法(一)
开发中常使用Oralce数据库,使用中也许会碰到形形色色的各类错误提示,如:ORA-00933:SQL命令未正确结束.ORA-009242等等,为此记录积累对于自己来说还是很有帮助的,今天就记录以前出 ...
- nginx_http核心模块(二)
对一些常用的配置项做一些解释:详细请看官方文档:http://nginx.org/en/docs/http/ngx_http_core_module.html 1. alias Syntax: ali ...
- android DatePickerDialog配合edittext实现按日期查询
我们从网上一搜DatePickerDialog相关实现,大多都是默认的形式,也就是不带取消按钮.下边上我的代码:我将代码简单的封装到一个工具类里边 public static DatePickerDi ...
- MySQL性能分析脚本
#!/usr/bin/python #!coding:utf-8 import mysql.connector as connector import json """ ...
- js 简单倒计时插件和使用方法
// 倒计时插件 (function (){ function countdown(config){ var startDate = config.start ? new Date(config.st ...
- Ant构建与部署Java项目---入门
原文地址:http://tech.it168.com/j/2007-11-09/200711091344781.shtml Ant是一个Apache基金会下的跨平台的构件工具,它可以实现项目的自动构建 ...
- FJ省队集训最终测试 T2
思路:发现如果一个人一共选了x个点,那么选中某一个点对的概率都是一样的,一个人选x个点的总方案是C(n,x),一个人选中某个点对的总方案是C(n-2,x-2),这样,那么选中某个点对的概率就是 x*( ...
- 勾选checkbox之后,button按钮可用
js:function chkClick() { if (document.getElementById("chkBox").checked == true) { ...