我对 JS 编程有点陌生,所以如果这很简单,请原谅我......但我已经创建了一个具有各种方法和属性的类。然而,这段代码必须在 IE11 上运行,所以我使用 Babel 来定位它并转换代码。我不熟悉它使用的语法,这可能是问题的一部分。我的问题是 loadLocationChildren
方法无法调用 _addLocations
方法。浏览器向我显示错误“this._addLocations 不是函数
”。 Babel 的输出文件如下:
"use strict";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var LocationDataManager = function () {
const isBusyChanged = "ISBUSYCHANGED";
const selectedLocationChanged = "SELECTEDLOCATIONCHANGED";
function LocationDataManager() {
_classCallCheck(this, LocationDataManager);
this._locationData = {};
this._selectedLocation = null;
this._loadHierachyUrl = "";
this._loadLocationUrl = "";
this._loadChildrenUrl = "";
this._isBusy = 0;
this._errorHandlerFunc = null;
}
_createClass(LocationDataManager, [{
key: "location",
value: function location(locationId) {
return this._locationData[locationId];
}
}, {
key: "selectLocation",
value: function selectLocation(locationId) {
var f = this._locationData[locationId];
if (f === undefined || f === null) throw Error("Location does not exist.");else this.selectedLocation = f;
}
}, {
key: "loadLocation",
value: function loadLocation(locationId) {
if (isNullOrEmpty(locationId)) return null;
if (isNullOrEmpty(this._loadLocationUrl)) return null;
var found = this._locationData[locationId];
if (found != null) return found;
this.isBusy = true;
$.post(this._loadLocationUrl, {
id: locationId
}, function (data) {
this._addLocations(data);
this.isBusy = false;
return data;
}).fail(function (error) {
this.isBusy = false;
this._errorHandlerFunc(error);
return null;
});
}
}, {
key: "loadLocationChildren",
//loads the children of a location into the map
value: function loadLocationChildren(parentId) {
if (isNullOrEmpty(this._loadChildrenUrl)) return null;
var found = this._locationData[parentId];
if (found != null && found.childrenLoaded == true) {
return found.children;
}
this.isBusy = true;
$.post(this._loadChildrenUrl, {
id: parentId
}, function (data) {
this._addLocations(data);
this.isBusy = false;
return data;
}).fail(function (error) {
this.isBusy = false;
this._errorHandlerFunc(error);
return null;
});
return null;
}
}, {
key: "loadHierarchy",
//loads a location and all parents up to root into the map
value: function loadHierarchy(locationId) {
if (isNullOrEmpty(locationId)) return null;
if (isNullOrEmpty(this._loadHierachyUrl)) return null;
this.isBusy = true;
$.post(this._loadHierachyUrl, {
id: locationId
}, function (data) {
this._addLocations(data);
this.isBusy = false;
return data;
}).fail(function (error) {
this.isBusy = false;
this._errorHandlerFunc(error);
return null;
});
return null;
}
}, {
key: "_addLocations",
value: function _addLocations(data) {
if (data === undefined || data === null || data.length === 0) return;
for (var i = 0; i < data.length; i++) {
var node = data[i];
this._locationData[node.Id] = node;
}
}
}, {
key: "loadHierarchyUrl",
get: function get() {
return this._loadHierachyUrl;
},
set: function set(value) {
this._loadHierachyUrl = value;
}
}, {
key: "loadLocationUrl",
get: function get() {
return this._loadLocationUrl;
},
set: function set(value) {
this._loadLocationUrl = value;
}
}, {
key: "loadChildrenUrl",
get: function get() {
return this._loadChildrenUrl;
},
set: function set(value) {
this._loadChildrenUrl = value;
}
}, {
key: "errorHandlerFunc",
set: function set(func) {
this._errorHandlerFunc = func;
}
}, {
key: "isBusy",
get: function get() {
return Boolean(this._isBusy);
},
set: function set(value) {
if (Boolean(value)) this._isBusy++;else {
this._isBusy--;
if (this._isBusy < 0) this._isBusy = 0;
}
pubSub.publish(isBusyChanged, this.isBusy);
}
}, {
key: "selectedLocation",
get: function get() {
return this._selectedLocation;
},
set: function set(value) {
if (value == this._selectedLocation) return;
this._selectedLocation = value;
pubSub.publish(selectedLocationChanged, this._selectedLocation);
}
}]);
return LocationDataManager;
}();
最佳答案
执行回调函数时,this
的上下文会丢失。要解决这个问题,您可以使用 arrow function或使用bind method 。
正如你所说,你没有使用箭头函数,那么你可以尝试bind
方法。我觉得应该是这样的:
$.post(..., function(data) { this._addLocations(data); ...}).bind(this);
关于如何在回调中访问正确的this
的详细信息,您可以引用this thread其中有非常详细的解释。
关于使用 Babel 后,Javascript 自定义类方法无法调用同一类中的另一个方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60819070/