Javascript嵌套字典空值 [英] Javascript nested dictionary null values

问题描述

下面我已经在JS中声明了一个类，并为其编写了方法。该类代表一个小部件（更多信息类结构 ）。

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

我遇到的问题是当我在setAttr ibutes方法中打印this时，输出为：

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

当我打印this.opts下一行：

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

注意：在展开它之前，第二个输出中的'status'和'power'的值显示为'null'。这可能是在尝试打印'this.opts.status'时获得null的唯一可能的原因。

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'.

代码

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);
        }
    });
};

推荐答案

/ code>在您的点击处理程序中与该处理程序之外的值不同。您需要在本地变量中隐藏这个。

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

或者，您可以使用 .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.

这篇关于Javascript嵌套字典空值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！