zoukankan      html  css  js  c++  java
  • Backbone中bind和bindAll的作用

    本文参考:
    http://blog.bigbinary.com/2011/08/18/understanding-bind-and-bindall-in-backbone.html

    bindAll内部调用了bind(),而bind()又内部调用了apply()

    apply()的作用

    apply lets us control the value of this when the function is invoked.
    apply可以改变函数function的上下文,也就是this的值

    例子:

    var func = function beautiful(){
      alert(this + ' is beautiful'); //这里的this是全局变量 window
    };
    func();
    
    var func = function beautiful(){
      alert(this + ' is beautiful');
    };
    func.apply('Internet');// 修改this的值
    

    为什么要改变this的值

    因为js的变态,举个栗子

    function Developer(skill) {
      this.skill = skill;
      this.says = function(){
        alert(this.skill + ' rocks!');
      }
    }
    var john = new Developer('Ruby'); //实例化一个Developer
    john.says(); //调用says()方法 Ruby rocks!
    

    在这种情况下 this是Developer对象。
    但是,如果换下面的写法,就不是了。

    function Developer(skill) {
      this.skill = skill;
      this.says = function(){
        alert(this.skill + ' rocks!');
      }
    }
    var john = new Developer('Ruby');
    var func = john.says;
    func();// undefined rocks!
    

    在这种情况下,func()是在全局上下文调用的,所以this就变成了全局变量window,window.skill因为没有定义,所以是undefined。

    使用apply来修改:

    function Developer(skill) {
      this.skill = skill;
      this.says = function(){
        alert(this.skill + ' rocks!');
      }
    }
    var john = new Developer('Ruby');
    var func = john.says;
    func.apply(john);
    

    这种方式虽然解决了问题,但是每次调用时,都要传递“john”这个参数,不方便函数的调用。

    In JavaScript world functions are first class citizens. The reason why we create function is so that we can easily pass it around. In the above case we created a function called func. However along with the function func now we need to keep passing john around. That is not a good thing. Secondly the responsibility of rightly invoking this function has been shifted from the function creator to the function consumer. That’s not a good API.

    因此,我们需要使用bind。

    使用bind来解决

    function Developer(skill) {
      this.skill = skill;
      this.says = function(){
        alert(this.skill + ' rocks!');
      }
    }
    var john = new Developer('Ruby');
    var func = _.bind(john.says, john); //bind有返回值,返回一个函数
    func();// Ruby rocks!
    

    To solve the problem regarding this issue we need a function that is already mapped to john so that we do not need to keep carrying john around. That’s precisely what bind does. It returns a new function and this new function has this bound to the value that we provide.

    bind的内部实现:

    return function() {
      return func.apply(obj, args.concat(slice.call(arguments)));
    };
    

    bind(方法名, this上下文)

    bind并没有修改原来的方法,而是返回一个新方法,这个新方法的this已经变成了第二个参数中赋予的值。

    使用bindAll来解决

    function Developer(skill) {
      this.skill = skill;
      this.says = function(){
        alert(this.skill + ' rocks!');
      }
    }
    var john = new Developer('Ruby');
    _.bindAll(john, 'says');
    var func = john.says;
    func();
    

    在使用bind时,必须使用bind返回的函数。

    在使用bindAll时,不必考虑返回值。实质上,bindAll是改变了原来定义的函数。

    在原来定义的Developer类中,有一个'says'属性,bindAll直接改变了'says'属性。

    使用Backbone的常见错误

    错误代码:

    window.ProductView = Backbone.View.extend({
      initialize: function() {
        _.bind(this.render, this);
        this.model.bind('change', this.render);
      }
    });
    

    错误原因:bind的返回值没有被使用,所以_.bind(this.render, this);没有起作用

    修改:

    window.ProductView = Backbone.View.extend({
      initialize: function() {
        var func = _.bind(this.render, this);
        this.model.bind('change', func);
        //或者
        // this.model.bind('change', _.bind(this.render, this));
      }
    });
    

    或者使用bindAll

    window.ProductView = Backbone.View.extend({
      initialize: function() {
        _.bindAll(this, this.render);
        this.model.bind('change', this.render);
      }
    });
    
    
  • 相关阅读:
    struts1.X的jar包
    struts2.1.6所需jar包详解
    hibernate的运行原理
    hibernate的save()方法详解
    flash的动态加载技术
    havok之内存管理
    worker中加载本地文件报错的解决方案
    行为树之我见
    havok之thread和memory system
    havok之collision detection
  • 原文地址:https://www.cnblogs.com/liulei-cherry/p/8435167.html
Copyright © 2011-2022 走看看