Google Closure bind / resolve issues with the this keyword

Question

What is the Google Closure's solution for resolving the issues with the this keyword in JavaScript callback functions. It would be so useful in OO style programming.

Is there any conventions or style for OOP in Google Closure???

update How can I access this.darklayer in ViewportSizeMonitor handler???

    goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.math.Size');
goog.require('goog.style');

goog.require('goog.dom.ViewportSizeMonitor');

goog.provide('ehsun7b.ajax.AjaxBox');

ehsun7b.ajax.AjaxBox = function (url, containerClass) {
  try {
    this.url = url;
    this.containerClass = containerClass;

    var viwportSize = goog.dom.getViewportSize();
    this.darklayer = goog.dom.createDom("div", {
      "style": "width: " + viwportSize.width + "px;" + "height: " + 
      viwportSize.height + "px;" +
      "background-image: url('css/img/50black.png');" +
      "z-index: 1000;" +
      "position: absolute;" +
      "left: 0px; top: 0px;"
    });

    var vsm = new goog.dom.ViewportSizeMonitor();
    goog.events.listen(vsm, goog.events.EventType.RESIZE, function(e) {
      console.log("this: " + this.darklayer);
    });

    this.container = goog.dom.createDom("div", {
      "class": this.containerClass
    });    
    goog.dom.appendChild(this.darklayer, this.container);
    goog.dom.setTextContent(this.container, "hello ajax box");    

    this.show = function() {
      goog.dom.appendChild(document.body, this.darklayer);
    },

    this.hide = function() {    
      goog.dom.removeNode(this.darklayer);
    }
  } catch (e) {
    console.log("error: " + e);
  }
};

I changed my class according to the Closure's style this way:

goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.math.Size');
goog.require('goog.style');

goog.require('goog.dom.ViewportSizeMonitor');

goog.provide('ehsun7b.ajax.AjaxBox');

ehsun7b.ajax.AjaxBox = function (url, containerClass) {
  try {
    this.url = url;
    this.containerClass = containerClass;

    var viwportSize = goog.dom.getViewportSize();
    this.darklayer = goog.dom.createDom("div", {
      "style": "width: " + viwportSize.width + "px;" + "height: " + 
      viwportSize.height + "px;" +
      "background-image: url('css/img/50black.png');" +
      "z-index: 1000;" +
      "position: absolute;" +
      "left: 0px; top: 0px;"
    });

    var vsm = new goog.dom.ViewportSizeMonitor();
    goog.events.listen(vsm, goog.events.EventType.RESIZE, function(e) {
      console.log("this: " + this.darklayer);
    });

    this.container = goog.dom.createDom("div", {
      "class": this.containerClass
    });    
    goog.dom.appendChild(this.darklayer, this.container);
    goog.dom.setTextContent(this.container, "hello ajax box");                   
  } catch (e) {
    console.log("error: " + e);
  }
};

ehsun7b.ajax.AjaxBox.prototype.show = function() {
  goog.dom.appendChild(document.body, this.darklayer);
}

ehsun7b.ajax.AjaxBox.prototype.hide = function() {    
  goog.dom.removeNode(this.darklayer);
}

Derek Slager · Accepted Answer · 2011-06-30T04:37:52.657

5

goog.bind is the general purpose solution. For example:

goog.bind(this.someFunction, this);
goog.bind(this.someFunction, this, arg1);
goog.bind(this.someFunction, this, arg1, arg2);

The framework is generally designed such that this can be avoided, so it's not common to have to explicitly call goog.bind.

For example, goog.events.EventHandler automatically binds callbacks to the handler you set in its constructor.

var handler = new goog.events.EventHandler(this);
handler.listen(something, 'something', this.someFunction); // no need to bind

The array functions also support a handler argument.

goog.array.forEach(elements, this.someFunction, this);
var items = goog.array.map(elements, this.someFunction, this);

And so on. Most parts of the framework make it pretty easy to do this, it's very well designed for "pseudo-classic" inheritance.

For more details, see http://www.bolinfest.com/javascript/inheritance.php

edited Jun 30 '11 at 04:37

answered Jun 30 '11 at 02:55

Derek Slager

13,619
3
34
34

Very nice, I'm not so familiar with the styles and convention of `Google Closure`, May I ask you see my class `AjaxBox` in my question update and tell me how can I access `this.darklayer` in ViewportSizeMonitor `handler`??? – ehsun7b Jun 30 '11 at 05:43
Also, do not put your goog.require() statements in the same script tag as the entry point to code that uses the goog.required functions or classes. A goog.require() call adds code to the document after the script tag containing the call. More: https://developers.google.com/closure/library/docs/gettingstarted – djreed Apr 19 '12 at 21:56

Google Closure bind / resolve issues with the this keyword

1 Answers1

Linked