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

  

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

  首先看下面的代码var myObj = {

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

    specialFunction: function () {

    },

    anotherSpecialFunction: function () {

    },

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

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

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

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

TypeError: this.specialFunction is not a function

 

   

 

第二部分:问题剖析

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

 

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

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

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

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

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

 

   

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

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

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

    }.bind(this));

}

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

 

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

 

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

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

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

bar(); // undefinedvar boundFunc = bar.bind(foo);

boundFunc(); // 3

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

  

  下面的例子也是常见的:

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

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

module.getX(); // 81var 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 xvar boundGetX = retrieveX.bind(module);
boundGetX(); // 81

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

 

   

 

  

第四部分:浏览器支持

  但是这个方法在IE8及以下是不被支持的,所以我们可以使用MDN提供的方法来使得IE低版本支持.bind()方法:

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

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;
  };
}

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

 

 

 

 

 

bind() 和 apply 与 call之间的转化。

对于apply和call,使用它们一般都是直接调用函数, 而对于bind,往往是对于一个函数bind, 然后返回了一个新的函数, 而没有直接调用。 如下;

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

        var name = "John Zhu";
        function foo() {
            console.log(this.name);
        }        var a = {
            name: "zzw"
        };
        foo.apply(a);

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

 

使用bind可以用下面的替代:

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

        var name = "John Zhu";
        function foo() {
            console.log(this.name);
        }        var a = {
            name: "zzw"
        };        var bar = foo.bind(a);
        bar();

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

 

http://www.cnblogs.com/zhuzhenwei918/p/6361291.html