[英]How to avoid bind(this) on every function?
I'm implementing a web map client built on top of OpenLayers3 which should be able to connect to multiple WMS servers, ask for WMS Capabilities and show layers advertised by servers. 我正在实现一个构建在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));
};
The code above works fine but I have to bind(this)
every time I want to call a function which needs access to "private" variables of MyMapClient
's instance. 上面的代码工作正常,但每次我想调用一个需要访问MyMapClient
实例的“私有”变量的函数时,我必须bind(this)
。 Isn't there a better way to access instance internals consistently, without sacrificing readability? 是否有更好的方法可以一致地访问实例内部,而不会牺牲可读性?
I would say to use the best of both worlds, that is, a local variable holding the correct scope, and calls to bind()
where needed: 我会说使用两个世界中最好的,即一个保持正确范围的局部变量,并在需要的地方调用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
);
});
};
You can "hard bind" a method like this: 你可以“硬绑定”这样的方法:
function Foo() {
this.bar = this.bar.bind(this);
}
Foo.prototype.bar = function() {
return console.log(this.baz);
};
Incidentally, that's what CoffeeScript compiles to when doing this: 顺便说一下,这就是CoffeeScript在执行此操作时编译的内容:
class Foo
bar: =>
console.log @baz
The =>
operator causes this preservation of context. =>
运算符导致保留上下文。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.