javascript中的Function.prototye.bind

更新时间：2015年06月25日 11:26:55 投稿：hebedich

这篇文章主要介绍了javascript中的Function.prototye.bind的相关资料,需要的朋友可以参考下

函数绑定(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 &amp;&amp; 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中async/await的错误处理方式
在现代JavaScript开发中,异步编程是不可或缺的一部分,async和await是一种强大的异步编程工具,它们使得编写和维护异步代码更加容易和清晰,然而,异步操作仍然可能会出现错误,本文将深入探讨async和await的错误处理方式,提供详细的代码示例和解释
2023-09-09
Bootstrap中CSS的使用方法
这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-02-02
Bootstrap滚动监听组件scrollspy.js使用方法详解
这篇文章主要为大家详细介绍了Bootstrap滚动监听组件scrollspy.js的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
Javascript BOM学习小结(六)
BOM：BrowserObjectModel,浏览器对象模型，提供JS中对浏览器的各种操作的对象，是JS应用中唯一没有相关标准的部分，这事BOM经常出现问题的所在，主要用于处理浏览器窗口与框架，浏览器特有的JS扩展也被默认为BOM的一部分，而各浏览器之间的公有对象就成了默认的标准
2015-11-11
js输入框邮箱自动提示功能代码实现
一个输入框当我输入任何字的时候自动下拉相应的邮箱提示，在输入框输入11的时候下拉框有所有11的邮箱输入其他的时候有其他文案对应的邮箱,下面实现这个自动提示功能
2013-12-12
保姆级Decimal.js使用教程(解决js精度问题)
这篇文章主要给大家介绍了关于保姆级Decimal.js使用的相关资料,文中介绍的方法主要解决了js精度问题,decimal.js库它是一个强大的JavaScript库,用于解决浮点数计算精度不准确的问题,需要的朋友可以参考下
2024-05-05
JavaScript实现无限级递归树的示例代码
这篇文章主要介绍了JavaScript实现无限级递归树的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
20分钟打造属于你的Bootstrap站点
20分钟打造属于你的Bootstrap站点，学会使用twitter bootstrap建立一个站点，从而巩固Bootstrap一系列基础知识，感兴趣的小伙伴们可以参考一下
2016-07-07
Bootstrap 按钮样式与使用代码详解
这篇文章主要介绍了Bootstrap -- 按钮样式与使用，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
JS正则中的RegExp对象对象
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能，每一条正则表达式模式对应一个RegExp实例
2012-11-11

javascript中的Function.prototye.bind

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具