JS OOP olaylarında Değişkenler ve Bağlam kullanımı

Question

Çağrının ardından olayları ele alan öğeler oluşturacağına çalışıyorum. Her şeyi bu nesneye koymak istedim, bu yüzden bu elemanlar tarafından çağrılan olaylar da thsi nesnesinde. Sorun şu ki, eğer başka bir şekilde yapmam gerekirse, bunun optimal olup olmadığından emin değilim.

"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(); 
}); 

hangi iç işlevdir nesne değil düğmeye işaret eder butonuna tıklamadan sonra denilen this.target ama olaylarla olayları yapmaya çalışıyordu, bu yüzden değişken var target = ... bunu swaped ama öyle, o emin değilim doğru şekilde (ve bu da sorularımdan biri bu şekilde yapmalı mıyım yoksa belki de kötü). Küresel kapsamdaki diğer değişkenlerle etkileşime girebilir mi (testler yapıp geçti ama muhtemelen bir şeyleri kaçırdım)? Nesnelerdeki ve kullanım (bu) bağlamında ne zaman değişkenler kullanmalıyım? İnternette araştırdım ama bunun hakkında hiçbir şey bulunamadı;

Answer 1

bazı belirli sorunlar üzerinde kodunuzu açıklamalı ettik. Umarım aslında neyi inşa ettiğinizi anlamanıza yardımcı olur; muhtemelen inşa etmek istediğiniz şeylerin aksine.

//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(); 
}); 

Neden bazı this -Nesne gerekiyor? Bu koddan ne haber? İhtiyaçlarınıza uyuyor mu? Bunu okudum ve o cevap değildi

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

Bunu anlamak başvurabilecekler: - http://ryanmorr.com/understanding-scope-and-context-in-javascript/