Функция Javascript, расширение объекта с расширением

Question

Этот фрагмент кода находится в онлайн-книге Addy Osmani, «Learning JavaScript Design Patterns».

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

Он утверждает, что может распространять объект с расширением. Он хорошо работает в образце книги. controlCheckbox может хорошо функционировать для обоих определений, Subject и DOM checkbox.

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

Но я просто не могу получить точку, почему он продлен? Определение функции extend выглядит overrding, вместо расширения, controlCheckbox из DOM checkbox к Subject, в моих глазах бедных. Может ли кто-нибудь помочь мне понять?

Answer 1

Вот пример:

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); 

Выход:

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

Легко видеть, что случилось:

1. поле a не существовало в extension, так что осталось без изменений.
2. Поле b существует в обоих объектах, поэтому было было перезаписано от extension Поле b.
3. Поле c существует только в extension, поэтому было добавлено до obj.

Answer 2

extend is is all all from from extension to obj и перезаписать те, которые уже существуют.

Когда вы говорите obj['attr'] = 'foo' в JavaScript, вы создаете атрибут attr в объекте obj и назначить foo к нему. Если attr уже существует в obj, вы перезапишете его foo.

Альтернативный синтаксис будет obj.attr='foo', но таким образом, вы не можете использовать динамические имена атрибутов (переменные, как в вашем примере key есть)

Некоторые полезные ссылки:

• http://www.w3schools.com/js/js_objects.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
• http://www.javascriptkit.com/javatutors/oopjs.shtml