谷歌關閉綁定/解決這個關鍵字問題

Question

什麼是谷歌關閉的解決方案，用於解決在JavaScript回調函數中關鍵字this的問題。它在OO風格編程中非常有用。

是否有谷歌關閉任何約定或樣式OOP ???

更新 我怎樣才能訪問this.darklayer在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); 
    } 
}; 

我根據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); 
} 

Answer 1

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

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

框架一般設計成這樣就可以避免，所以它不是常見的顯式調用goog.bind。

例如，goog.events.EventHandler會自動將回調綁定到您在其構造函數中設置的處理函數。

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

數組函數還支持處理程序參數。

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

依此類推。這個框架的大部分部分使得它很容易實現，它非常適合「僞經典」繼承。

有關詳細信息，請參閱http://www.bolinfest.com/javascript/inheritance.php