Javascript function, extend an object with an extension

Question

This piece of code is from Addy Osmani's online book, "Learning JavaScript Design Patterns".

// Extend an object with an extension
function extend( extension, obj ){
  for ( var key in extension ){
    obj[key] = extension[key];
  }
}

It claims it can extend an object with an extension. It work well in the sample on the book. The controlCheckbox can function well for both definitions, Subject and DOM checkbox.

<input id="mainCheckbox" type="checkbox"/>
...
var controlCheckbox = document.getElementById( "mainCheckbox" ),
...
extend( new Subject(), controlCheckbox );
...
controlCheckbox["onclick"] = new Function( "controlCheckbox.Notify(controlCheckbox.checked)" );

But I just can't get the point why it is extended? The function definition of extend looks like overrding, instead of extending, controlCheckbox from an DOM checkbox to Subject, in my poor eyes. Can someone help me understand?

Joren · Accepted Answer · 2013-10-12 00:22:29Z

1

What extend does is add all attributes from extension to obj and overwrite the ones already existing.

When you say obj['attr'] = 'foo' in javascript, you create the attribute attr in the object obj and assign foo to it. If attr already exists in obj, you will overwrite it with foo.

An alternative syntax would be obj.attr='foo', but this way, you can't use dynamic attribute names (variables, like in your example key is)

Some useful links:

edited Oct 12, 2013 at 0:22

answered Oct 12, 2013 at 0:14

Joren

3,37327 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bfavaretto Over a year ago

The explanation is okay, but that link is anything but "official".

Joren Over a year ago

@bfavaretto better now? ;)

bfavaretto Over a year ago

Yes, thanks! Don't get me wrong, but w3schools' content quality is questionable, and, despite the name, it's not affiliated with the w3c. MDN (a wiki) is a better reference.

kol · Accepted Answer · 2013-10-12 00:24:57Z

0

Here is an example:

function extend( extension, obj ){
  for ( var key in extension ){
    obj[key] = extension[key];
  }
}

var obj = { a: 1, b: 2 },
    extension = { b: 20, c: 30 };

console.log("Before: ", obj);
extend(extension, obj);
console.log("After: ", obj);

Output:

Before:  Object {a: 1, b: 2} 
After:  Object {a: 1, b: 20, c: 30}

It's easy to see what's happened:

Field a didn't exist in extension, so it remained unchanged.
Field b existed in both objects, so it was overwritten by extension's field b.
Field c existed only in extension, so it was added to obj.

answered Oct 12, 2013 at 0:24

kol

28.9k13 gold badges91 silver badges126 bronze badges

Collectives™ on Stack Overflow

Javascript function, extend an object with an extension

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related