在 JS 函数调用链中丢失上下文

Question

我有一些 JS "objects" 我正在使用一些复杂的东西。因此，以下代码被简化为所需的最少信息：

function AttributeWrapper(model) {
    var self = this;
    var attributeModel = model;

    self.labelPrimitive = null;
    self.mandatorySignPrimitive = null;
    self.documentationPrimitive = null;
    self.valuePrimitive = null;

    self.isHidden = function() {
        return false;
    }
}

function Primitive(model, wrapper) {
    var self = this;
    var groupingObject = wrapper;

    self.model = model;
    self.layoutCell = null;

    self.render = function() {

        if (self.isHidden()) {
            return;
        }

        self.layoutCell.getDomElement().innerHTML = self.model.id || "TODO";
    }

    self.isHidden = function() {
        return groupingObject.isHidden();
    }
}

这个对象主要是这样使用的：

function AnOtherObject {
    var self = this;

    self.anyFunction = function() {
        var wrapper = new AttributeWrapper(model);
        var primitive = new Primitive(anOtherKindOfModel, wrapper);

        var isHidden = primitive.isHidden();
    }
}

无论出于何种原因，第一次调用都正常。因此调用了 Primitive "class" 中的函数并且范围是正确的（变量按预期设置）。 Primitive class 对其包含的对象（AttributeWrapper 的实例）的调用也有效，但上下文混乱了。我希望我可以在 "isHidden" 函数中访问像 attributeModel 这样的实例变量，但它们不再存在了。此外 "self" 不是实例而是其他东西（看起来像全局 "document" 或 "window" 实例），但 "this" 反转为实例...... 我在声明对象时做错了什么吗？我不明白为什么第一个对象的调用有效，但子对象是有线的...

Answer 1

问题好像解决了...

我正在使用 visual studio 进行调试。 AttributeWrapper 中 "isHidden" 函数的 "return false" 被编写为放置断点并继续编写此函数的代码（以在调试器中查看对象及其字段）。当遇到断点时，我遇到了描述问题。

今天我和一位同事一起看了它，他认为可能只是调试器不知何故感到困惑并且没有显示正确的状态。所以我完成了代码并再次开始调试。当断点被击中时，突然状态是正确的。所以看起来问题真的是一个混乱的调试器，一切都在正常工作。通过在函数中使用上下文中的内容，这种混淆似乎得到了解决...

经验教训：visual studio 可能不是调试的最佳选择 javascript =)

在 JS 函数调用链中丢失上下文

Losing context in JS function call chain

javascript

javascript-objects