理解javascript中的Function.prototype.bind的方法

网络编程 2024/9/1 佚名

3 2 1

在初学Javascript时，我们也许不需要担心函数绑定的问题，但是当我们需要在另一个函数中保持上下文对象this时，就会遇到相应的问题了，我见过很多人处理这种问题都是先将this赋值给一个变量（比如self、_this、that等），尤其是var that = this是我见的最多的，这样当你改变环境之后就可以使用它。这些都是可以的，但是还有一种更好的、更专有的方法，那就是使用Function.prototype.bind，下面进行详尽的讲解。　　

第一部分：需要解决的问题

首先看下面的代码

var myObj = {

  specialFunction: function () {

  },

  anotherSpecialFunction: function () {

  },

  getAsyncData: function (cb) {
    cb();
  },

  render: function () {
this.getAsyncData(function () {
      this.specialFunction();
      this.anotherSpecialFunction();
    });
  }
};

myObj.render();

这里我希望创建一个对象，包含了前面两个普通的方法；第三个方法可以传递一个函数，传入的这个函数立即执行；最后一个方法会调用myObj对象的getAsyncData方法，这里使用了this，然后在getAsyncData方法中传入了一个函数，这个函数继续调用这个对象的前两个方法，仍使用了this，这时很多人实际上就可以看出问题所在了，将上述代码输入控制台，得到下面的结果：

TypeError: this.specialFunction is not a function

第二部分：问题剖析

在对象中render方法中的this的确是指向myObj对象的，所以我们可以通过this.getAsyncData来调用这个对象中的函数，但是当我们给其传递函数作为参数时，这里的this就指向了全局环境window了，因为全局环境中没有对象中的前两个方法，所以才会报错。

第三部分：解决问题的几种方式

所以我们需要做的就是正确调用对象中的前两个方法，很多人使用的方法便是首先在对象的环境中获取this赋值给另一个变量，这时就可以在后面的环境中调用了，如下所示：

  render: function () {
    var that = this;
    this.getAsyncData(function () {
      that.specialFunction();
      that.anotherSpecialFunction();
    });
  }

虽然这种方法是可行的，但是使用Function.prototype.bind()会使代码更清晰、易懂，如下所示：

render: function () {

  this.getAsyncData(function () {

    this.specialFunction();

    this.anotherSpecialFunction();

  }.bind(this));

}

这里我们就成功地把this绑定到了环境中。

下面是另外一个简单的例子：

var foo = {
  x: 3
}

var bar = function(){
  console.log(this.x);
}

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3

下面的例子也是常见的：

this.x = 9;  // this refers to global "window" object here in the browser
var module = {
 x: 81,
 getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();  
// returns 9 - The function gets invoked at the global scope

// Create a new function with 'this' bound to module
// New programmers might confuse the
// global var x with module's property x
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

第四部分：浏览器支持

但是这个方法在IE8及以下是不被支持的，所以我们可以使用MDN提供的方法来使得IE低版本支持.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;
 };
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Function.prototype.bind

标签：

Function.prototype.bind

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“理解javascript中的Function.prototype.bind的方法”

理解javascript中的Function.prototype.bind的方法

暂无“理解javascript中的Function.prototype.bind的方法”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

理解javascript中的Function.prototype.bind的方法

Function.prototype.bind

漂亮实用的页面loading(加载)封装代码

JavaScript数组复制详解

评论“理解javascript中的Function.prototype.bind的方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接