如何避免在每個函數上綁定（this）？

Question

我正在實現一個構建在OpenLayers3之上的Web地圖客戶端，該客戶端應該能夠連接到多個WMS服務器，請求WMS功能並顯示服務器通告的層。

var MyMapClient = function(params) {
    this.wms_sources_ = params.wms_sources;
    this.wms_capabilities_ = [];
}

MyMapClient.prototype.parse_capabilities = function(index) {
    var capabilities = this.wms_capabilities_[index];
    // do something with capabilities 
}

MyMapClient.prototype.load_wms_capabilities = function() {
    var parser = new ol.format.WMSCapabilities();

    jQuery.each(this.wms_sources_, (function (index, wms_source) {

        console.log("Parsing " + wms_source.capabilities_url);

        jQuery.when(jQuery.ajax({
            url: wms_source.capabilities_url,
            type: "GET",
            crossDomain: true,
        })).then((function (response, status, jqXHR) {
            var result = parser.read(response);
            console.log("Parsed Capabilities, version " + result.version);
            this.wms_capabilities_[index] = result;
            return index;
        }).bind(this)).then(this.parse_capabilities.bind(this));

    }).bind(this));
};

上面的代碼工作正常，但每次我想調用一個需要訪問MyMapClient實例的“私有”變量的函數時，我必須bind(this) 。 是否有更好的方法可以一致地訪問實例內部，而不會犧牲可讀性？

Answer 1

我會說使用兩個世界中最好的，即一個保持正確范圍的局部變量，並在需要的地方調用bind() ：

MyMapClient.prototype.load_wms_capabilities = function() {
    var parser = new ol.format.WMSCapabilities(),
        _this = this;

    jQuery.each(this.wms_sources_, function (index, wms_source) {
        console.log("Parsing " + wms_source.capabilities_url);

        jQuery.when(jQuery.ajax({
            url: wms_source.capabilities_url,
            type: "GET",
            crossDomain: true,
        })).then(function (response, status, jqXHR) {
            var result = parser.read(response);
            console.log("Parsed Capabilities, version " + result.version);
            _this.wms_capabilities_[index] = result;
            return index;
        }).then(
          function() { return _this.parse_capabilities(); }
          // or else
          // _this.parse_capabilities.bind(_this)
          // pick the one you like more
        );
    });
};

Answer 2

你可以“硬綁定”這樣的方法：

function Foo() {
    this.bar = this.bar.bind(this);
}

Foo.prototype.bar = function() {
    return console.log(this.baz);
};

順便說一下，這就是CoffeeScript在執行此操作時編譯的內容：

class Foo
  bar: =>
    console.log @baz

=>運算符導致保留上下文。