Variablen und Kontext in JS OOP Behandlung von Ereignissen

Question

Ich versuche Objekt zu machen, die nach Elementen mit Ereignissen Umgang erstellen aufrufen wird. Ich wollte alles in dieses eine Objekt legen, also sind die von diesen Elementen genannten Ereignisse auch in diesem Objekt. Das Problem ist, dass ich mir nicht sicher bin, ob das optimal ist, wenn ich es anders machen sollte.

"use strict"; 
var addFunctionBlock = (function(uarea){ 
var target = document.getElementById(uarea); // VS this.target 

this.init = function(){ 
    for(var a = 0; a < 5; a++){ 
     this.button = document.createElement('button'); 
     this.button.onclick = this.eventHandler; 
     this.button.style.width = "50px"; 
     this.button.style.height = "20px"; 
     target.appendChild(this.button) 
    } 
}; 

this.eventHandler = function(ev){ 
    target.appendChild(document.createTextNode(ev)); 
}; 
this.init(); 
}); 

Versuchte Ereignisse mit this.target aber die Ereignisse nach dem Klick auf den Button, um Taste in denen das Objekt nicht der Fall Funktion Punkt genannt zu machen, so dass ich swaped es variable var target = ..., aber ich bin es nicht sicher, dass ist richtig (und das ist auch eine der Fragen, sollte ich es so machen oder vielleicht ist es schlecht). Kann es mit anderen Variablen im globalen Bereich interferieren (haben Tests bestanden und bestanden, aber wahrscheinlich habe ich etwas übersehen)? Wann sollte ich Variablen in Objekten verwenden und wann (diesen) Kontext verwenden? Habe im Internet geforscht, aber nichts dazu gefunden;

Answer 1

Ich habe Ihren Code auf einige besondere Probleme mit Anmerkungen versehen. Ich hoffe, es hilft Ihnen zu verstehen, was Sie tatsächlich bauen; im Gegensatz zu dem, was Sie wahrscheinlich bauen möchten.

//you don't need the round brackets around, only when you are creating a self-invoking-function 
var addFunctionBlock = (function(uarea){ 
    var target = document.getElementById(uarea); // VS this.target 

    //you (probably) don't call this function with the new-keyword, 
    //and the scope is also not bound to some object 
    //so, `this` points to the global Object (`window`) 
    // 1. you pollute the global namespace 
    // 2. every call will overwrite the definitions of the ones before. 
    this.init = function(){ 
     for(var a = 0; a < 5; a++){ 
      //each iteration you assign a new button to the same property on the same object. 
      //each iteration you overwrite the value with a new one. 
      //if you want to keep a reference to (all) buttons, push them to an Array 
      this.button = document.createElement('button'); 
      //well here is the problem/misunderstanding. functions are executed with the scope of the object they are called on, 
      //not the object they have been defined on; in this case: the button. 
      this.button.onclick = this.eventHandler; 
      this.button.style.width = "50px"; 
      this.button.style.height = "20px"; 
      target.appendChild(this.button) 
     } 
    }; 

    //if you want your `eventHandler` to memorize to whom he belongs, you schould bind his scope 
    //this.eventHandler = function(){ ... }.bind(this); 
    //now this function will always be called with this pointing to `this`. 
    this.eventHandler = function(ev){ 
     target.appendChild(document.createTextNode(ev)); 
    }; 

    //what do you need an init-function for, if you instantly call it? 
    //why not just execute the code? 
    this.init(); 
}); 

Warum benötigen Sie ein this-Objekt? Was ist mit diesem Code? Passt es zu Ihren Bedürfnissen?

Ich glaube, Sie aus der Java-Ecke sein könnten, und weiß nichts anderes, als Klassen;)

function addFunctionBlock(uarea){ 
    var target = document.getElementById(uarea); // VS this.target 

    //eventHandler encloses the `target`-variable from this particular function-call, 
    //and therefor you can always access it; like a private property. 
    function eventHandler(ev){ 
     //first open the dev-tools of your browser, 
     // then you can see the logs. 
     console.log(target, ev.target); 

     //better than this here 
     //target.appendChild(document.createTextNode(ev)); 
    } 

    for(var i = 0; i<5; ++i){ 
     var button = document.createElement('button'); 
      button.onclick = eventHandler; 
      button.style.width = "50px"; 
      button.style.height = "20px"; 

     target.appendChild(button); 
    } 
} 

Answer 2

könnten Sie verweisen, dies zu verstehen: - http://ryanmorr.com/understanding-scope-and-context-in-javascript/