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

 更新时间:2017年02月03日 08:25:47   作者:918之初  
这篇文章主要介绍了理解javascript中的Function.prototype.bind的方法,具有一定参考价值,有兴趣的可以了解一下。

在初学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;
 };
}

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

相关文章

  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    大家经常看到网页里图片渐变显示,自己写一个。原理很简单就是修改元素的css透明度,具体实现代码如下,感兴趣的各位可以参考下哈,希望对大家有所帮助
    2013-06-06
  • 微信小程序如何再次获取用户授权的方法

    微信小程序如何再次获取用户授权的方法

    这篇文章主要介绍了微信小程序如何再次获取用户授权的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • echarts柱状图坐标轴内容显示不全的两种解决办法

    echarts柱状图坐标轴内容显示不全的两种解决办法

    本文主要介绍了echarts柱状图坐标轴内容显示不全的两种解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • JS 自执行函数原理及用法

    JS 自执行函数原理及用法

    这篇文章主要介绍了JS 自执行函数原理及技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 微信小程序使用progress组件实现显示进度功能【附源码下载】

    微信小程序使用progress组件实现显示进度功能【附源码下载】

    这篇文章主要介绍了微信小程序使用progress组件实现显示进度功能,涉及progress组件相关属性设置操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • 利用js实现Vue2.0中数据的双向绑定功能

    利用js实现Vue2.0中数据的双向绑定功能

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下
    2021-07-07
  • layui 弹出层值回传解决方式

    layui 弹出层值回传解决方式

    今天小编就为大家分享一篇layui 弹出层值回传解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • uniapp获取页面高度与元素高度简单示例

    uniapp获取页面高度与元素高度简单示例

    在实际开发中我们会遇到不确定高度的情况,那么在uniapp中我们如何获取区域的高度呐?这篇文章主要给大家介绍了关于uniapp获取页面高度与元素高度的相关资料,需要的朋友可以参考下
    2023-09-09
  • 在ES5与ES6环境下处理函数默认参数的实现方法

    在ES5与ES6环境下处理函数默认参数的实现方法

    本文给大家介绍在ES5与ES6环境下处理函数默认参数的实现方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • JavaScript基于libgif.js实现控制gif动画帧

    JavaScript基于libgif.js实现控制gif动画帧

    这篇文章主要为大家详细介绍了JavaScript如何利用libgif.js插件控制gif动画帧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02

最新评论