Google Closure使用this关键字绑定/解决问题 [英] Google Closure bind / resolve issues with the this keyword

问题描述

什么是 Google Closure 的解决方案，用于解决JavaScript回调函数中此关键字的问题。它在 OO 样式编程中非常有用。

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.

在 OOP 的约定或样式> Google Closure ???

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

更新
如何在ViewportSizeMonitor处理程序中访问this.darklayer ???

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

我按照Closure的风格改变了我的课程：

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

推荐答案

goog.bind 是通用解决方案。例如：

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

框架通常设计为可以避免这种情况，因此不必显式调用 goog.bind 。

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

例如， goog.events.EventHandler 自动将回调绑定到您在其构造函数中设置的处理程序。

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.

有关详细信息，请参阅 http://www.bolinfest.com/javascript/inheritance.php

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

这篇关于Google Closure使用this关键字绑定/解决问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！