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实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
jquery插件格式实例分析
Jun 16 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
js实现弹幕飞机效果
Aug 27 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
重置版战役片段
2020/04/09 魔兽争霸
PHP学习之PHP表达式
2006/10/09 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
php表单提交实例讲解
2015/11/12 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
js charAt的使用示例
2014/02/18 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python如何实现定时器功能
2020/05/28 Python
给排水专业应届生求职信
2013/10/12 职场文书
计算机软件专业求职信
2014/06/10 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
html form表单基础入门案例讲解
2021/07/15 HTML / CSS