Javascript nested dictionary null values

问题

Below I have declared a 'class' in JS and am writing methods for it. The class represents a widget (more info class structure).

The problem I'm having is that when I print 'this' inside the setAttr ibutes method, the output is:

And when I print 'this.opts' in the very next line:

NOTE: The values of 'status' and 'power' are shown as 'null' in the second output before expanding it. This can be the only possible reason behind getting 'null' while trying to print 'this.opts.status'.

CODE

function PowerStatus(options) {
    this.opts = {
        meterName: '-',
        displayName: null,
        status: null,
        power: null,
        mainDiv: null,
    };
    this.opts = $.extend(this.opts, options);
    this.opts.mainDiv = '#' + this.opts.mainDiv;
    this.onClick = function () {
        console.log('Clicked ' + this.opts.meterName);
    };

    // fill in missing attributes
    this.getAttributes();
    this.setHtml();
    this.bindUIActions();
}

PowerStatus.prototype.getAttributes = function () {
    var _this = this;
    if (this.opts.displayName == null) {
        getDisplayName(function (dName) {
            _this.opts.displayName = dName;
        }, _this.opts.meterName);
    }
    if (_this.opts.status == null || _this.opts.power == null) {
        _this.getStatus(function (status, power) {
            _this.opts.status = status;
            _this.opts.power = power;
        }, _this.opts.meterName)
    }
};

PowerStatus.prototype.setHtml = function () {
    var _this = this;
    var divType = this.opts.mainDiv.split('-').slice(1).slice(0, -1).join('_');
    var url = '/static/' + divType + '/html/' + divType + '.html';

    $(this.opts.mainDiv).load(url, function () {
        _this.setAttributes();
    });
};


PowerStatus.prototype.setAttributes = function () {
    var div = $(this.opts.mainDiv).find('.load-name');
    var span = $('span:first', div);
    span.text(this.opts.displayName);

    div = $(this.opts.mainDiv).find('.load-value');
    span = $('span:first', div);
    span.text(this.opts.power);
};

PowerStatus.prototype.bindUIActions = function () {
    var _this = this;
    $(this.opts.mainDiv).on('click', function () {
        _this.onClick();
    });
};

PowerStatus.prototype.getStatus = function (callback) {
    $.ajax({
        method: "GET",
        dataType: "json",
        url: "/widget/power_status/status/",
        data: {name: this.opts.meterName},
        success: function (data) {
            if (typeof callback === "function") callback(data.status, data.power);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
};

回答1:

The value of this inside your click handler is not the same as the value outside that handler. You need to stash this in a local variable and use that instead.

var statusObj = this;
this.onClick = function () {
    console.log('Clicked ' + statusObj.opts.meterName);
};

Alternatively, you could use .bind():

this.onClick = function () {
    console.log('Clicked ' + this.opts.meterName);
}.bind(this);

The value of this is always set on every individual call to a function based on the circumstances of the call.

来源：https://stackoverflow.com/questions/22923341/javascript-nested-dictionary-null-values

标签

javascript

jquery

dictionary

nullreferenceexception