title: Extend an object with an extension in JS
body: <p>Can someone explain to me what is happening here?</p>
  
  <pre><code>function extend( obj, extension ){
    for ( var key in extension ){
      obj[key] = extension[key];
    }
  }
  </code></pre>
  
  <p>Context: Used in the Observer Pattern  <a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript" rel="nofollow noreferrer">https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript</a></p>
  
  <p>For example:</p>
  
  <pre><code>// Extend the controlling checkbox with the Subject class
  extend( controlCheckbox, new Subject() );
  </code></pre>
  
  <p>With </p>
  
  <pre><code>function Subject(){
    this.observers = new ObserverList();
  }
  
  Subject.prototype.addObserver = function( observer ){
    this.observers.add( observer );
  };
  
  Subject.prototype.removeObserver = function( observer ){
    this.observers.removeAt( this.observers.indexOf( observer, 0 ) );
  };
  
  Subject.prototype.notify = function( context ){
    var observerCount = this.observers.count();
    for(var i=0; i &lt; observerCount; i++){
      this.observers.get(i).update( context );
    }
  };
  </code></pre>
  
  <p><strong>What I think is going on:</strong> The for loop goes through the <code>Subject</code>'s  properties that I added before and then adds it to the Observer-object. </p>
  
  <p><strong>What I don't understand:</strong> How come it only adds those properties that I added before (i.e. observers, addObserver, removeObserver, notify) but not <strong>ALL</strong> properties of the extension object? </p>
  
  <p>For example when I print out the extension object I can see that the <code>constructor</code>- or the <code>__proto__</code> property is <strong>NOT</strong> added.</p>