javascript 中的 bind (编辑中。。。。)

这篇文章说的非常好!http://my.oschina.net/blogshi/blog/265415

 

我的体会就是,函数中的this,指的是运行时,它是被哪个对象调用的。因为javascrpit的函数是一个对象,自然就可以脱离定义它的对象单独使用,脱离之后,函数中的this就会改变,这个问题是javascript最常见的问题,所以出了好多解决方法,比如call函数,apply函数,bind函数等等。而bind函数的返回值是一个函数,这个返回的函数的this被指定为定义时的this,不再因为调用者的不同而改变成不同的this。

在面向对象语言中this的使用很简单,比如java,objective-c,这是因为类中的方法从不能脱离类而单独使用,而且实例方法必须通过这个类的实例去调用,这就保证了this定义的一致性。而js不同,它里面的函数完全可以独立调用,而且可以在函数内部随意使用this指针,没有编译环节,自然也不会报错,但是真正运行的时候,就会因为this指向的内容根本不是打算指向的内容而出bug。

this在同一个function作用域内肯定是同一个值,而如果再嵌套一层,就很可能改变了。这里引用一句别人的总结:函数嵌套产生的内部函数的this不是其父函数,仍然是全局对象。比如下面这段代码:

  <TabBarIOS.Item
                title="公告"
                icon={require('image!gonggao') }
                selected={this.state.selectedTab === 'message'}
                onPress={

                  (function () {
        
                    this._selectTab('message');

                    var that = this;

                    var path = Service.host + Service.getMessage;
                    //fetch message from server
                    Util.post(path, {
                      key: Util.key
                    }, function (data) {
                      console.log('got data from internet-----------------------data is ' + data);
                      console.log('this is'+this);
                      console.log('that is'+that);

                      that.setState({
                        date:data,
                      });
                      console.log('got data from internet end-----------------------data is ' + data);
                    

                    });

                  }.bind(this))
                }
                >

上面这段代码有3个this,第一个是TabBarIOS.Item外边render函数(这里没有写出来)的this,第二个和第三个分别对应2个function作用域,为了实现能够调用到最外边的this,第一个function使用了bind方法,第二个function使用了重新定义变量的方法。

 

再理解一下bind方法:

bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

这句话就是说

(function(data) {
      somecode here.....
    }).bind(this)

上边这段代码返回的是一个函数,这个函数接收一个参数。

(function(data) {
    somecode here.....

}).bind(this,realData)

上边这段代码返回的是一个函数,这个函数不需要参数,因为原函数的第一个参数已经被赋值为realData了。

 

posted @ 2016-07-19 13:26  幻化成疯  阅读(174)  评论(0编辑  收藏  举报