JS OOPイベントハンドリングの変数とコンテキスト

Question

私はオブジェクトを作成しようとしていますが、呼び出された後にイベント処理の要素が作成されます。私はこの1つのオブジェクトにすべてを配置したいので、これらの要素によって呼び出されるイベントはthsiオブジェクトにもあります。問題は、他の方法でそれを行うべきかどうかが、それが最適かどうか分かりません。

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

は、その内部には、関数でオブジェクトをしないように、ボタンをポイントするボタンをクリックした後に呼び出さ this.targetが、イベントとイベントを作成しようとしていたので、私は、変数 var target = ...にそれをswapedが、私はあることそれはよく分かりません適切に（そしてそれは私がそれをこのようにしなければならないか、あるいはそれは悪いかもしれません）質問の1つです。それはグローバルスコープの他の変数に干渉することができますか（テストをパスしましたが、おそらく私は何かを見逃しました）？オブジェクトに変数を使用する必要がありますか（この）コンテキストを使用するときはいつですか？インターネット上で再調査しましたが、それについては何も見つかりませんでした。

Answer 1

私はいくつかの特定の問題にあなたのコードを注釈を付けました。実際に何を構築しているのか理解するのに役立ちます。おそらくあなたが作りたいものとは対照的です。

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

なぜthis？オブジェクトが必要なのですか？このコードはどうですか？それはあなたのニーズに合っていますか？

私は、Java-コーナーの外にあるかもしれないと思うし、クラスよりも何も知りません。私はそれを読んでいると、それが答えではなかった

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

あなたはこれを理解するために参照することができます： - http://ryanmorr.com/understanding-scope-and-context-in-javascript/