Object.assign() a deep object

Question

I have a base object ProfileDialog which I am extending with Object.assign().

var ProfileDialog = function (containerObj) {
    this.init = function () {
        this.container = containerObj;
    };

    this.render = function () {
        let content = document.createElement('div');
        content.innerText = 'Dialog here';
        this.container.appendChild(content);
    };

    this.init();
    this.render();
};

Mixin:

var DialogMixin = function () {
    return {
        open: function () {
            this.container.style.display = 'block';
        },
        close: function () {
            this.container.style.display = 'none';
        }

    }
};

Now I do the assignment:

Object.assign(ProfileDialog.prototype, DialogMixin());

It works just fine, this context resolves fine in open and close methods.

But, when I put the mixin in a deeper structure, putting it inside actions property:

var DialogMixin = function () {
    return {
        actions: {
            open: function () {
                this.container.style.display = 'block';
            },
            close: function () {
                this.container.style.display = 'none';
            }
        }
    }
};

The context becomes actions object so the code breaks.

How do I properly extend the object with new methods when they are put in a deep structure?

No... I wasn't saying about `let` or `var`. Are you using `babel.js`? — Praveen Kumar Purushothaman, May 26 '16 at 14:46
I don't use Babel, just a simple single file I run in Chrome — Sergei Basharov, May 26 '16 at 14:46
I seriously doubt then it will not take `let` without `babel.js`. I could be wrong. Let's see. — Praveen Kumar Purushothaman, May 26 '16 at 14:47
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let — Sergei Basharov, May 26 '16 at 14:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/113048/discussion-between-praveen-kumar-and-sergei-basharov). — Praveen Kumar Purushothaman, May 26 '16 at 14:50
Have a look at [Organize prototype javascript while perserving object reference and inheritance](http://stackoverflow.com/q/15884096/1048572). Just don't do that. — Bergi, May 29 '16 at 22:10

score 0 · Answer 1 · answered May 27 '16 at 09:13

The only thing i can think of is using bind to bind this.

So something like

var ProfileDialog = function (containerObj) {
    this.containerObj = containerObj;
};

var DialogMixin = function (newThis) {
    var obj = {
        actions: {
            open: function () {
                console.log('open', this, this.containerObj.style);
            }
        }
    }
    obj.actions.open = obj.actions.open.bind(newThis);
    return obj;
};

var container = {
    style : 'some style'
};
var dialog = new ProfileDialog(container);
var mixinDialog = Object.assign(dialog, DialogMixin(dialog));

mixinDialog.actions.open();

See https://jsfiddle.net/zqt1me9d/4/

Object.assign() a deep object

1 Answers1