Problems extending object in Javascript ECMA6

Question

I am having an issues extending an object with another object in ECMA6. After I have extended the object in question it says it cannot find the method on the updated object. Here is my code:

Subject class:

// Subject to be observed
class Subject {
    constructor() {
        this.observers = new ObserverList();
    }

    addObserver(observer) {
        this.observers.add(observer);
    }

    removeObserver(observer) {
        this.observers.removeAt(this.observers.indexOf( observer, 0 ));
    }

    notify(context) {
        for(let i = 0; i < this.observers.count(); i++) {
            this.observers.get(i).update(context);
        }
    }
}

And my code where the object is extended:

/**
 * Function to extend an object with another object
 */
function extend(obj, extension) {
    Object.assign(obj, extension);
}

// Get our DOM elements
let controlCheckbox = document.getElementById("mainCheckbox"),
    addBtn = document.getElementById("addNewObserver"),
    container = document.getElementById("observersContainer");


// Concrete subject
// extend controlling checkbox with Subject class
extend(controlCheckbox, new Subject());

// Clicking the checkbox will trigger notifications to it's observers
controlCheckbox.onclick = () => {
    controlCheckbox.notify(controlCheckbox.checked);
};

addBtn.onclick = addNewObserver;

function addNewObserver() {
    let check = document.createElement('input');
    check.type = 'checkbox';

    extend(check, new Observer());
    check.update = function(value) {
        this.checked = value;
    };
    controlCheckbox.addObserver(check);
    container.appendChild(check);
}

When the onclick is fired it is saying that the method controlCheckbox.addObserver is not defined. I have added a breakpoint to view the controlCheckbox object and I can see that method is available in the prototype. Should this not work? Can anyone point out where I am going wrong?

"The Object.assign() method only copies enumerable and own properties from a source object to a target object." developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Felix Kling
– Felix Kling, Commented Jan 18, 2017 at 14:05
Given ES2015, I don't understand why you're not using the proper extends keyword to create the subclass. — Alnitak
– Alnitak, Commented Jan 18, 2017 at 14:08
It's not a sub-class? It's a DOM element object that needs to inherit the Subject class — James
– James, Commented Jan 18, 2017 at 14:10
Indeed. I know there are other solutions I was just wondering if this was possible. :) — James
– James, Commented Jan 18, 2017 at 14:14

T.J. Crowder · Accepted Answer · 2017-01-18 14:14:31Z

Object.assign only copies own enumerable properties from the source objects to the target. Your Subject object only has one own property: observers. All of the others (the methods) are inherited, not "own".

You'll need to write your own version of extend that handles inherited properties as well if you want to have them copied to the target.

The other issue is that by default, your methods won't be enumerable, either, so just a simple for-in won't find them. You'd need to use getOwnPropertyNames and getPrototypeOf.

For instance:

function extend(target, ...sources) {
    for (const source of sources) {
        for (let obj = source; obj && obj !== Object.prototype; obj = Object.getPrototypeOf(obj)) {
            for (const name of Object.getOwnPropertyNames(obj)) {
                if (!(name in target)) {
                    target[name] = obj[name];
                }
            }
        }
    }
    return target;
}

...but that's very quick and dirty, just concept. Note how I stopped at Object.prototype rather than copying toString and such.

Side note: Extending DOM elements in the way you are leaves you fairly open to conflicts with methods added to the DOM in the future, or by other libraries, etc. You may be fine with that, but it would worry me. Wrapping elements (like jQuery does) would be my preference.

Qwertiy · Accepted Answer · 2017-01-18 14:26:56Z

0

No, Object.assign doesn't copy anything from proto.

console.log(Object.assign({}, Object.create({x:9})).x)

Just wrap dom-element by the Subject and work with you class.

edited Jan 18, 2017 at 14:26

answered Jan 18, 2017 at 14:06

Qwertiy

21.9k17 gold badges69 silver badges143 bronze badges

1 Comment

Qwertiy Over a year ago

@T.J.Crowder, ooops. Removed that part.

Collectives™ on Stack Overflow

Problems extending object in Javascript ECMA6

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related