2017-02-12 5 views
0

コンストラクタ関数でインスタンス化された別の関数からJavaScript変数にアクセスできません。 undefinedを返します。他の関数からのインスタンス変数へのアクセス

クラスBoxの新しいオブジェクトをインスタンス化しており、インスタンス変数を定義し、HTML要素を作成し、イベントリスナーを設定するコンストラクタ関数でインスタンス化しています。このリスナーのハンドラclickHandlerは、プロトタイプで定義されている関数です。 clickHandlerから、私はthis.selected変数にアクセスしようとしています。しかし、私はundefinedを得ます。

コード:

HTML

<!DOCTYPE html> 
<html> 
<head> 

<title>Test</title> 
</head> 
<body> 

<div id="element1"></div> 
<br/> 
<div id="element2"></div> 

<script type="text/javascript" src="script.js"></script> 
<script> 
    init([{id: "element1"}, {id: "element2"}]); //call init function 
</script> 

</body> 
</html> 

Javascriptを script.js私は、さまざまなイベントハンドラ関数にthis.selected変数にアクセスするにはどうすればよい

function Box(id, count) { //the class 
    this.selected = false; //need this variable in clickHandler 
    this.div = document.createElement("div"); 
    this.div.id = "container" + count; 
    this.div.style.width = "250px"; 
    this.div.style.height = "150px"; 
    this.div.style.border = "1px solid black"; 
    document.getElementById(id).appendChild(this.div); 
    this.div.addEventListener("click", this.clickHandler, false); //add event listener on the created div element 
} 

Box.prototype.clickHandler = function() { //click handler 
    console.log("clickHandler, selected = " + this.selected); // undefined 
}; 

function init(settings) { 
    //var obj; 
    for(var i = 0; i < settings.length; i++) { 
     new Box(settings[i].id, (i+1)); //instantiate new object 
    } 
} 

?私は複数のイベントを聞いて、そのために変数this.selectedが必要です。お手伝いありがとう。ハンドラを追加する

+0

http://stackoverflow.com/questions/8100469/preserve-this-reference-in-javascript-prototype-event-handlerの可能性の重複とhttp://stackoverflow.com/questions/2025789/this-in-javascript-prototype-functionへの参照およびhttp://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a -折り返し電話 – Connum

答えて

0

変更:

this.div.addEventListener("click", this.clickHandler.bind(this), false); 

これは、コールバック関数で「この」文脈などのオブジェクトをバインドします。

function Box(id, count) { //the class 
 
    this.selected = false; //need this variable in clickHandler 
 
    this.div = document.createElement("div"); 
 
    this.div.id = "container" + count; 
 
    this.div.style.width = "250px"; 
 
    this.div.style.height = "150px"; 
 
    this.div.style.border = "1px solid black"; 
 
    document.getElementById(id).appendChild(this.div); 
 
    this.div.addEventListener("click", this.clickHandler.bind(this), false); 
 
} 
 

 
Box.prototype.clickHandler = function() { //click handler 
 
    console.log("clickHandler, selected = " + this.selected); // undefined 
 
}; 
 

 
function init(settings) { 
 
    //var obj; 
 
    for(var i = 0; i < settings.length; i++) { 
 
     new Box(settings[i].id, (i+1)); //instantiate new object 
 
    } 
 
} 
 
    init([{id: "element1"}, {id: "element2"}]); //call init function
<div id="element1"></div> 
 
<br/> 
 
<div id="element2"></div>

関連する問題