javascript - 在 Javascript 对象的一个​​属性中添加对它的引用是一种不好的做法吗？

Question

假设我有这样的设置。

var Account = function(data) {
  this.data = data;
  this.domElement = (function(){ code that generates DOM element that will represent this account })();
  this.domElement.objectReference = this;
}

Account.prototype = {
  show: function() { this.domElement.classList.remove('hidden'); },
  hide: function() { this.domElement.classList.add('hidden') }
}

我的问题是关于最后一行:this.domElement.objectReference = this;

这将是一件有用的事情，因为这样我就可以将事件监听器添加到我的 DOM 元素中，并且仍然可以访问对象本身。例如，我可以添加会影响 DOM 元素的方法，例如 hide() 和 show()，而不必直接使用 CSS 修改 DOM 元素的可见性。

我测试了这段代码，它的工作原理就像我想要的那样，但我很好奇这是否会导致内存泄漏或其他一些不愉快的情况，或者这是否是可以接受的事情？

谢谢! 卢卡

Answer 1

我知道@PaulS 已经回答了这个问题。已经，但我发现答案是反直觉的(不期望从 Account 构造函数返回 DOM 元素)并且过于以 DOM 为中心，但同时实现非常简单，所以我不知道该怎么想;)

无论如何，我只是想展示一种不同的方法。您可以将 Account 实例存储在 map 中，并为它们提供唯一的 id(也许它们已经有一个)，然后将该 id 存储为DOM 元素上的 data 属性。最后，您实现一个 getById 函数或类似的函数，以通过监听器中的 id 检索帐户实例。

这几乎就是 jQuery 的 data 的方式有效。

这是一个示例，其中包含您希望从评论中获得的委托(delegate)事件。

<强> DEMO

var Account = (function (accounts, id) {

    function Account(data) {
        accounts[this._id = ++id] = this;

        this.el = createEl.call(this);
    }

    Account.prototype = {
        constructor: Account,
        show: function() { this.el.classList.remove('hidden'); },
        hide: function() { this.el.classList.add('hidden'); }
    };

    function createEl() {
        var el = this.el = document.createElement('div');
        el.className = 'account';
        el.innerHTML = el.dataset.accountId = this._id;

        return el;
    }

    Account.getById = function (id) {
        return accounts[id];
    };

    Account.init = function () {
        //add delegate listeners

        document.addEventListener('click', function (e) {
            var target = e.target,
                account = Account.getById(target.dataset.accountId);

            if (!account) return;

            account.hide();
        });
    };

    return Account;
})({}, 0);

//once DOM loaded
Account.init(); //start listening to events

var body = document.body;

body.appendChild(new Account().el);
body.appendChild(new Account().el);