javascript中的Function.prototye.bind


Posted in Javascript onJune 25, 2015

函数绑定(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);    
  }
 
//

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 #Javascript
jquery实现的缩略图预览滑块实例
Jun 25 #Javascript
使用javascript提交form表单方法汇总
Jun 25 #Javascript
Jquery结合HTML5实现文件上传
Jun 25 #Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 #Javascript
javascript学习笔记之函数定义
Jun 25 #Javascript
把Node.js程序加入服务实现随机启动
Jun 25 #Javascript
You might like
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
[原创]图片分页查看
2006/08/28 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python面向对象编程基础解析(一)
2017/10/26 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
初中美术教学反思
2014/01/29 职场文书
经典洗发水广告词
2014/03/13 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
房产协议书范本2014
2014/09/30 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
一条慢SQL语句引发的改造之路
2022/03/16 MySQL