首页 > 编程 > JavaScript > 正文

javascript中的Function.proto_tye.bind

2019-11-02 15:03:41
字体:
来源:转载
供稿:网友

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

  函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototype.bind(),只是你有可能仍然没有意识到这点。

  第一次遇到这个问题的时候,你可能倾向于将this设置到一个变量上,这样你可以在改变了上下文之后继续引用到它。很多人选择使用 self, _this 或者 context 作为变量名称(也有人使用 that)。这些方式都是有用的,当然也没有什么问题。但是其实有更好、更专用的方式。

  我们真正需要解决的问题是什么?

  在下面的例子代码中,我们可以名正言顺地将上下文缓存到一个变量中:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 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() 可以有更加简洁干净的方式:

  ?

1 2 3 4 5 6 7 8 9 10 11 render: function () {   this.getAsyncData(function () {   this.specialFunction();   this.anotherSpecialFunction();   }.bind(this));   }

  我们刚才做了什么?

  .bind()创建了一个函数,当这个函数在被调用的时候,它的 this 关键词会被设置成被传入的值(这里指调用bind()时传入的参数)。因此,我们传入想要的上下文,this(其实就是 myObj),到.bind()函数中。然后,当回调函数被执行的时候, this 便指向 myObj 对象。

  如果有兴趣想知道 Function.prototype.bind() 内部长什么样以及是如何工作的,这里有个非常简单的例子:

  ?

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表