理解javascript中的Function.prototype.bind
在初学Javascript时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象this时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将this赋值给一个变量(比如self、_this、that等),尤其是var that = this是我见的最多的,这样当你改变环境之后就可以使用它。这些都是可以的,但是还有一种更好的、更专有的方法,那就是使用Function.prototype.bind,下面进行详尽的讲解。
第一部分:需要解决的问题
首先看下面的代码var myObj = {
specialFunction: function () { }, anotherSpecialFunction: function () { }, getAsyncData: function (cb) {
cb();
}, render: function () {
this.getAsyncData(function () {
this.specialFunction();
this.anotherSpecialFunction();
});
}
}; myObj.render();
这里我希望创建一个对象,包含了前面两个普通的方法;第三个方法可以传递一个函数,传入的这个函数立即执行;最后一个方法会调用myObj对象的getAsyncData方法,这里使用了this,然后在getAsyncData方法中传入了一个函数,这个函数继续调用这个对象的前两个方法,仍使用了this,这时很多人实际上就可以看出问题所在了,将上述代码输入控制台,得到下面的结果:
TypeError: this.specialFunction is not a function
第二部分:问题剖析
在对象中render方法中的this的确是指向myObj对象的,所以我们可以通过this.getAsyncData来调用这个对象中的函数,但是当我们给其传递函数作为参数时,这里的this就指向了全局环境window了,因为全局环境中没有对象中的前两个方法,所以才会报错。
第三部分:解决问题的几种方式
所以我们需要做的就是正确调用对象中的前两个方法 ,很多人使用的方法便是首先在对象的环境中获取this赋值给另一个变量,这时就可以在后面的环境中调用了,如下所示:
render: function () {
var that = this;
this.getAsyncData(function () {
that.specialFunction();
that.anotherSpecialFunction();
});
}
虽然这种方法是可行的,但是使用Function.prototype.bind()会使代码更清晰、易懂,如下所示:
render: function () { this.getAsyncData(function () { this.specialFunction(); this.anotherSpecialFunction(); }.bind(this)); }
这里我们就成功地把this绑定到了环境中。
下面是另外一个简单的例子:
var foo = {
x:
} var bar = function(){
console.log(this.x);
} bar(); // undefined var boundFunc = bar.bind(foo); boundFunc(); //
下面的例子也是常见的:
this.x = ; // this refers to global "window" object here in the browser
var module = {
x: ,
getX: function() { return this.x; }
}; module.getX(); // var retrieveX = module.getX;
retrieveX();
// returns 9 - The function gets invoked at the global scope // Create a new function with 'this' bound to module
// New programmers might confuse the
// global var x with module's property x
var boundGetX = retrieveX.bind(module);
boundGetX(); //
第四部分:浏览器支持
但是这个方法在IE8及以下是不被支持的,所以我们可以使用MDN提供的方法来使得IE低版本支持.bind()方法:
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
} var aArgs = Array.prototype.slice.call(arguments, ),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis
? this
: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
}; fNOP.prototype = this.prototype;
fBound.prototype = new fNOP(); return fBound;
};
}
bind() 和 apply 与 call之间的转化。
对于apply和call,使用它们一般都是直接调用函数, 而对于bind,往往是对于一个函数bind, 然后返回了一个新的函数, 而没有直接调用。 如下;
var name = "John Zhu";
function foo() {
console.log(this.name);
}
var a = {
name: "zzw"
};
foo.apply(a);
使用bind可以用下面的替代:
var name = "John Zhu";
function foo() {
console.log(this.name);
}
var a = {
name: "zzw"
};
var bar = foo.bind(a);
bar();
实现一个最简单的bind()函数
迅雷笔试所要求的:
- 新的bind方法返回的函数拷贝需要支持再次改变this的指向
- 新的bind方法需要像ES5标准的bind方法一样处理预设参数和函数拷贝的动态参数
实现如下所示:
var self = null
Function.prototype.bind = function() {
if (self == null){
self = this
}
var context = [].shift.call(arguments),
args = [].slice.call(arguments);
return function() {
return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
}
};
可以看到,这里先判断self是否存在,如果self为null,我们就让self指向this,然后,我们在通过[].shift.call(arguments);的方式获取到arguments的第一个元素。 通过[].slice.call(arguments);的方式获取到所有的后面传递进来的参数。最后,在返回一个function的时候,应当注意: 使用self调用,并且传入context环境,接着,传入之前传递的参数以及后面又传进来的参数。 非常好。
一些好的点:
- [].shift.call() 的使用、[].concat.call()的使用、 [].slice.call()的使用等, 即使用数组的方法时,我们可以使用[].slice.call()这种形式,好处是可以保证this的正确指向。
- call和apply的合理使用,比如在返回的function中我们使用apply,因为这样可以直接传入一个数组作为参数,会很方便。
理解javascript中的Function.prototype.bind的更多相关文章
- 理解 JavaScript 中的 Function.prototype.bind
函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其 ...
- 浅析 JavaScript 中的 Function.prototype.bind() 方法
Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...
- 深入理解javascript中的Function.prototye.bind
函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其 ...
- JavaScript 中的 Function.prototype.bind() 方法
转载自:https://www.cnblogs.com/zztt/p/4122352.html Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个 ...
- JavaScript 函数绑定 Function.prototype.bind
ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...
- [转] 理解 JavaScript 中的 Array.prototype.slice.apply(arguments)
假如你是一个 JavaScript 开发者,你可能见到过 Array.prototype.slice.apply(arguments) 这样的用法,然后你会问,这么写是什么意思呢? 这个语法其实不难理 ...
- prototype.js中Function.prototype.bind方法浅解
prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...
- 深入理解javascript中的立即执行函数(function(){…})()
投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...
- javascript Function.prototype.bind
语法: fn.bind(obj,arg1,arg2,arg3...) bind是es5新增的方法,顾名思义,它的作用是将函数绑定到某个对象上,就像是某个对象调用方法一样.其本质还是改变了该函数的上下文 ...
随机推荐
- acm--统计错误数
题目描述 题目地址:http://www.nowcoder.com/practice/67df1d7889cf4c529576383c2e647c48?tpId=49&tqId=29276&a ...
- js函数——setinterval和setTimeout
1.window.setTimeout方法 该方法可以延时执行一个函数,例如: <script language="JavaScript" type="text/j ...
- <转>SQL的执行顺序
SQL 不同于与其他编程语言的最明显特征是处理代码的顺序.在大数编程语言中,代码按编码顺序被处理,但是在SQL语言中,第一个被处理的子句是FROM子句,尽管SELECT语句第一个出现,但是几乎总是最后 ...
- iOS开发——Scheme白名单
问题:在iOS 9下涉及到平台客户端跳转,系统会自动到项目info.plist下检测是否设置平台Scheme.对于需要配置的平台,如果没有配置,就无法正常跳转平台客户端. 报错:This app is ...
- FireBug 调试工具(推荐)
Firebug是网页浏览器 Mozilla Firefox 下的一款开发类扩展,如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利. 安装如下: 下面是 ...
- 测试部署nginx
1.已经安装了nginx 2.修改tomcat端口号为10081(可随意) 3 修改nginx的nginx.config 如下: upstream apiserver { ip_ ...
- jQuery源码学习(2):选择器初窥
选择器初窥 代码架构: jQuery选择器可以依照传入数据的类型分为五大类: 传入字符串:$("div"), $("#id"), $(".div1&q ...
- leangoo
leangoo网址:https://www.leangoo.com/
- [repost]Xcode因为证书问题经常报的那些错
[reference]http://www.jianshu.com/p/b10680a32d3 1. 确认下证书是不是开发证书,如果是发布证书就会出现这样的提示. 2. 证书失效了,去开发者中 ...
- Recovering a WiredTiger collection from a corrupt MongoDB installation
Reference: http://www.alexbevi.com/blog/2016/02/10/recovering-a-wiredtiger-collection-from-a-corrupt ...