Google Closure associates / resolves issues with this keyword

Question

What is a Google Closure solution to solve problems with the this in JavaScript callback functions. That would be so useful in OO style programming.

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

Upgrade How can I get access to this.darklayer handler ViewportSizeMonitor ???

  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 style as follows:

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

Answer 1

goog.bind is a general purpose solution. For instance:

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

The structure is usually designed in such a way that this can be avoided, so usually you do not need to explicitly call goog.bind .

For example, goog.events.EventHandler automatically associates callbacks with a handler installed in its constructor.

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

Array functions also support a handler argument.

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

Etc. Most parts of the structure make it pretty easy to do this; it is very well designed for "pseudo-classical" inheritance.

See http://www.bolinfest.com/javascript/inheritance.php for more details.