关于Function.prototype.bind
bind()方法会创建一个新函数,称为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入bind()方法的第一个参数作为 this
,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
实际使用中我们经常会碰到这样的问题:
function Person(name){
this.nickname = name;
this.distractedGreeting = function() { setTimeout(function(){
console.log("Hello, my name is " + this.nickname);
}, );
}
} var alice = new Person('Alice');
alice.distractedGreeting();
//Hello, my name is undefined
这个时候输出的this.nickname
是undefined,原因是this
指向是在运行函数时确定的,而不是定义函数时候确定的,再因为setTimeout在全局环境下执行,所以this
指向setTimeout
的上下文:window
。
以前解决这个问题的办法通常是缓存this
,例如:
function Person(name){
this.nickname = name;
this.distractedGreeting = function() {
var self = this; // <-- 注意这一行!
setTimeout(function(){
console.log("Hello, my name is " + self.nickname); // <-- 还有这一行!
}, );
}
} var alice = new Person('Alice');
alice.distractedGreeting();
// after 500ms logs "Hello, my name is Alice"
这样就解决了这个问题,非常方便,因为它使得setTimeout
函数中可以访问Person的上下文。但是看起来稍微一种蛋蛋的忧伤。
但是现在有一个更好的办法!您可以使用bind。上面的例子中被更新为:
function Person(name){
this.nickname = name;
this.distractedGreeting = function() {
setTimeout(function(){
console.log("Hello, my name is " + this.nickname);
}.bind(this), ); // <-- this line!
}
} var alice = new Person('Alice');
alice.distractedGreeting();
// after 500ms logs "Hello, my name is Alice"
bind() 最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的
this
值。JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来,然后再调用,希望方法中的 this
是原来的对象。(比如在回调中传入这个方法。)如果不做特殊处理的话,一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数,则能很漂亮地解决这个问题:
this.x = ;
var module = {
x: ,
getX: function() { return this.x; }
}; module.getX(); // var getX = module.getX;
getX(); // 9, 因为在这个例子中,"this"指向全局对象 // 创建一个'this'绑定到module的函数
var boundGetX = getX.bind(module);
boundGetX(); //
引自:http://www.css88.com/archives/5611
关于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
解析Function.prototype.bind 简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. b ...
- 解析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; ...
随机推荐
- ireport开发报表,Java和JSP端如何集成
Java端: @RequestMapping("/report") public String report() { return "/credit/report/rep ...
- Jrebel6.3.3破解,配置图文教程
JRebel是个很好的开发工具,我在网上找了好久都没有找到很详细的教程,破解与配置教程千篇一律,步骤不详细.编写这篇教程,综合网络上的知识,加上了自己的理解与详细图文步骤. 安装 一般最新的插件是没有 ...
- POJ 1837 DP
一开始看到这个题 第一反应:暴搜! 看看数据范围 ...放弃了 然后就在各种憋状态转移方程. 各种不会 还是看了Discuss里面说的才有点儿思路 直接放状态转移方程: f[i][ j+ w[i]*c ...
- 二叉排序树(BST)的建立
给一个非递归的吧. /* 已知,二叉树存储结构定义见bstree.h,请编写一个算法函数bstree creatBstree(int a[],int n), 以数组a中的数据作为输入建立一棵二叉排序树 ...
- JavaSE配置文件java.util.Properties【单例模式Singleton】
如果不是放在src文件夹里面,则: p.load(new BufferedInputStream(new FileInputStream("tank.properties"))); ...
- ADC 电源监测
我能为别人做点什么?这是我最近在思考的问题. 看了 ADC 电源监测代码,觉得对 ADC 的理解不到位,代码中有很多部分都不懂.如: 1. 为什么初始化的时候管脚设置为输出? 2. ADC 采集到的值 ...
- matlab算法
流水线型车间作业调度问题遗传算法Matlab源码流水线型车间作业调度问题可以描述如下:n个任务在流水线上进行m个阶段的加工,每一阶段至少有一台机器且至少有一个阶段存在多台机器,并且同一阶段上各机器的处 ...
- Network Address Translation(转载)
Network Address Translation 来源:http://alexanderlaw.blog.hexun.com/9791596_d.html 地址转换用来改变源/目的 ...
- [Linux] CentOS 加入开机启动
1.在/etc/init.d/目录下新建一个文件:autostart.sh #!/bin/sh #chkconfig: 2345 80 80 #description: auto start web ...
- BYTE 和字符串转换
string hanzi = "汉字"; byte[] arr = System.Text.Encoding.UTF8.GetBytes(hanzi); string temp = ...