Javascript Пользовательский метод класса не может вызвать другой метод в том же классе после использования Babel

Question

Я немного новичок в JS программировании, так что простите, если это просто ... Но я создал класс с различными методами и свойствами. Однако этот код должен работать на IE11, поэтому я использовал Babel для его нацеливания и преобразования кода. Я не знаком с синтаксисом, который он использует, что может быть частью проблемы. Моя проблема в том, что метод loadLocationChildren не может вызвать метод _addLocations. Браузер выдает ошибку «1003 *». Выходной файл 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;
}();

Answer 1

Контекст this теряется при выполнении функции обратного вызова. Чтобы решить эту проблему, вы можете использовать функцию стрелки или метод связывания .

Поскольку вы сказали, что не используете функции стрелок, вы можете попробовать метод bind. Я думаю, что это должно быть так:

$.post(..., function(data) { this._addLocations(data); ...}).bind(this);

Для получения подробной информации о том, как получить правильный this внутри обратного вызова, вы можете обратиться к этой теме , в которой очень подробно объяснение.