javascript中的Function.prototye.bind
作者:hebedich 发布时间:2024-04-22 22:35:59
函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototype.bind(),只是你有可能仍然没有意识到这点。
第一次遇到这个问题的时候,你可能倾向于将this设置到一个变量上,这样你可以在改变了上下文之后继续引用到它。很多人选择使用 self, _this 或者 context 作为变量名称(也有人使用 that)。这些方式都是有用的,当然也没有什么问题。但是其实有更好、更专用的方式。
我们真正需要解决的问题是什么?
在下面的例子代码中,我们可以名正言顺地将上下文缓存到一个变量中:
var myObj = {
specialFunction: function () {
},
anotherSpecialFunction: function () {
},
getAsyncData: function (cb) {
cb();
},
render: function () {
var that = this;
this.getAsyncData(function () {
that.specialFunction();
that.anotherSpecialFunction();
});
}
};
myObj.render();
如果我们简单地使用 this.specialFunction() 来调用方法的话,会收到下面的错误:
Uncaught TypeError: Object [object global] has no method 'specialFunction'
我们需要为回调函数的执行保持对 myObj 对象上下文的引用。 调用 that.specialFunction()让我们能够维持作用域上下文并且正确执行我们的函数。 然而使用 Function.prototype.bind() 可以有更加简洁干净的方式:
render: function () {
this.getAsyncData(function () {
this.specialFunction();
this.anotherSpecialFunction();
}.bind(this));
}
我们刚才做了什么?
.bind()创建了一个函数,当这个函数在被调用的时候,它的 this 关键词会被设置成被传入的值(这里指调用bind()时传入的参数)。因此,我们传入想要的上下文,this(其实就是 myObj),到.bind()函数中。然后,当回调函数被执行的时候, this 便指向 myObj 对象。
如果有兴趣想知道 Function.prototype.bind() 内部长什么样以及是如何工作的,这里有个非常简单的例子:
Function.prototype.bind = function (scope) {
var fn = this;
return function () {
return fn.apply(scope);
};
}
还有一个非常简单的用例:
var foo = {
x: 3
}
var bar = function(){
console.log(this.x);
}
bar();
// undefined
var boundFunc = bar.bind(foo);
boundFunc();
// 3
我们创建了一个新的函数,当它被执行的时候,它的 this 会被设置成 foo —— 而不是像我们调用 bar() 时的全局作用域。
浏览器支持
Browser Version support
Chrome 7
Firefox (Gecko) 4.0 (2)
Internet Explorer 9
Opera 11.60
Safari 5.1.4
正如你看到的,很不幸,Function.prototype.bind 在IE8及以下的版本中不被支持,所以如果你没有一个备用方案的话,可能在运行时会出现问题。
幸运的是,Mozilla Developer Network(很棒的资源库),为没有自身实现 .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, 1),
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;
};
}
适用的模式
在学习技术点的时候,我发现有用的不仅仅在于彻底学习和理解概念,更在于看看在手头的工作中有没有适用它的地方,或者比较接近它的的东西。我希望,下面的某些例子能够适用于你的代码或者解决你正在面对的问题。
CLICK HANDLERS(点击处理函数)
一个用途是记录点击事件(或者在点击之后执行一个操作),这可能需要我们在一个对象中存入一些信息,比如:
var logger = {
x: 0,
updateCount: function(){
this.x++;
console.log(this.x);
}
}
我们可能会以下面的方式来指定点击处理函数,随后调用 logger 对象中的 updateCount() 方法。
document.querySelector('button').addEventListener('click', function(){
logger.updateCount();
});
但是我们必须要创建一个多余的匿名函数,来确保 updateCount()函数中的 this 关键字有正确的值。
我们可以使用如下更干净的方式:
document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger));
我们巧妙地使用了方便的 .bind() 函数来创建一个新的函数,而将它的作用域绑定为 logger 对象。
SETTIMEOUT
如果你使用过模板引擎(比如Handlebars)或者尤其使用过某些MV*框架(从我的经验我只能谈论Backbone.js),那么你也许知道下面讨论的关于在渲染模板之后立即访问新的DOM节点时会遇到的问题。
假设我们想要实例化一个jQuery插件:
var myView = {
template: '/* 一个包含 <select /> 的模板字符串*/',
$el: $('#content'),
afterRender: function () {
this.$el.find('select').myPlugin();
},
render: function () {
this.$el.html(this.template());
this.afterRender();
}
}
myView.render();
你或许发现它能正常工作——但并不是每次都行,因为里面存在着问题。这是一个竞争的问题:只有先到达的才能获胜。有时候是渲染先到,而有时候是插件的实例化先到。【译者注:如果渲染过程还没有完成(DOM Node还没有被添加到DOM树上),那么find(‘select')将无法找到相应的节点来执行实例化。】
现在,或许并不被很多人知晓,我们可以使用基于 setTimeout() 的 slight hack来解决问题。
我们稍微改写一下我们的代码,就在DOM节点加载后再安全的实例化我们的jQuery插件:
afterRender: function () {
this.$el.find('select').myPlugin();
},
render: function () {
this.$el.html(this.template());
setTimeout(this.afterRender, 0);
}
然而,我们获得的是 函数 .afterRender() 不能找到 的错误信息。
我们接下来要做的,就是将.bind()使用到我们的代码中:
//
afterRender: function () {
this.$el.find('select').myPlugin();
},
render: function () {
this.$el.html(this.template());
setTimeout(this.afterRender.bind(this), 0);
}
//
以上所述就是本文的全部内容了,希望大家能够喜欢。
猜你喜欢
- 一 概念固定窗口就像是滑动窗口的一个特例,固定窗口是大小固定且不能随着时间而变化的。滑动时间窗口就是把一段时间片分为多个样本窗口,可以通过更
- 目录提问:回答:真实情况:知识点结论:总结提问:mysql的字段,unsigned int(3), 和unsinged int(6), 能存
- Pycharm是一款很好用的python开发工具,开发Python爬虫和Python web方面都很不错这里我为大家提供了两种pycharm
- 最近一直在研究 Javascript 相关的技术。在《Javascript 高级程序设计》有篇章节着重阐述了优化 Javascri
- 区块链包含彼此链接的区块列表.要存储整个列表,我们将创建一个名为TPCoins : 的列表变量;TPCoins = []我们还将编写一个名为
- 前言计算机存储数据的方式都是二进制数据,但是我们在mysql中存储的是字符串数据,那么这些数据到底在Mysql中如何存储呢?这就涉及到字符集
- 1. 错误的类型Error: 所有错误的父类型错误的子类型包括:ReferenceError: 引用的变量不存在TypeErro
- 如下所示:import webbrowserimport codecsimport timewith open("test.txt
- 1,安装 安装就不多说了,除了一般的那个压缩包
- 问题我使用python 2.7和xlwt模块进行excel导出我想设置我知道可以使用的单元格的背景颜色style1 = xlwt.easyx
- 八皇后问题描述问题: 国际象棋棋盘是8 * 8的方格,每个方格里放一个棋子。皇后这种棋子可以攻击同一行或者同一列或者斜线(左上左下右上右下四
- 本文实例汇总了Python中关于列表的常用操作方法,供大家参考借鉴。具体方法如下:一、Python创建列表:sample_list = [&
- Python IDLE Subprocess Connection Error的解决方法今天准备运行一个Python 文件时,IDLE突然报
- 背景随着Web技术的发展和移动互联网的发展,Hybrid技术已经成为一种前端开发的主流技术方案。那什么是Hybrid App呢?Hybrid
- 由传智播客教程整理,我们这里使用的是python2.7.x版本,就是2.7之后的版本,因为python3的改动略大,我们这里不用它。现在我们
- 面试题:索引的作用?首先建立一张数据库表:create table single_table(id int not auto_increme
- 1、pyecharts绘制时间轮播柱形图from random import randintfrom pyecharts import op
- 利用百度 AI 开发平台的 OCR 文字识别 API 识别并提取图片中的文字。首先需注册获取 API 调用的 ID 和 key,步骤如下:打
- 很多网站在注册时除了需要用户填写用户名与密码之外,还会要求用户输入邮箱,而且是属于那种不填写就不能完成注册的强制型的。碰到这种情况的时候,一
- 由于一些原因,需要SAE上站点的日志文件,从SAE上只能按天下载,下载下来手动处理比较蛋疼,尤其是数量很大的时候。还好SAE提供了API可以