Question

我有一个构造函数：

var ProfileDialog = function (containerObj) {
    this.init = function () {
        this.container = containerObj;
        let content = document.createElement('div');
        content.innerText = 'Dialog here';
        this.container.appendChild(content);
        this.container.style.display = 'none';
    };

    this.init();
};

然后我像这样扩展构造函数的原型：

ProfileDialog.prototype.open = function () {
    this.container.style.display = 'block';
}

var dlg = new ProfileDialog(document.body)
dlg.open();

这很好用，但如果我尝试将.open()放在这样的对象中：

ProfileDialog.prototype.actions = {
    open: function () {
        this.container.style.display = 'block';
    }
}

var dlg = new ProfileDialog(document.body)
dlg.actions.open();

失败并显示错误

functional.js：25未捕获的TypeError：无法读取未定义的属性'style'（...）

因为传递给函数的上下文错误。

如何确保独立于嵌套，上下文始终是实例化对象？

Answer 1

你可以尝试绑定这个＆＃39; to actions.open

Answer 2

也许您之前将this保存到that并将其作为init功能的闭包。

var ProfileDialog = function (containerObj) {
    var that = this;
    this.init = function () {
        that.container = containerObj;
        let content = document.createElement('div');
        content.innerText = 'Dialog here';
        that.container.appendChild(content);
        that.container.style.display = 'none';
    };

    this.init();
};

对象内部的函数获取错误的上下文

2 个答案: