javascriptのクラス定義、キーワード "this"はクラスを参照していません

JavaScriptの文法に慣れていませんが、クラスを定義したいと思いますが、これはキーワードとして動作しません。理由を知りたい、ありがとう！ JavaScriptコードは以下の通りです：javascriptのクラス定義、キーワード "this"はクラスを参照していません

var GameUI = function(){ 
     this.ctx = this.ctx || null; 
     this.canvas = document.getElementById('canvas'); 
     this.chessToMove = {x : -1, y :-1}; 
     this.style = 'stype_1'; 
     //this.drawBeginX = 4; 
     //this.drawBeginY = 17; 
     this.boardStyle = { 
      stype_1 : { 
       beginX : 4, 
       beginY : 17, 
       intervalX : 35, 
       intervalY : 36, 
      }, 
      stype_2 : { 
       beginX : 4, 
       beginY : 17, 
       intervalX : 10, 
       intervalY : 10, 
      }, 
     }; 

     this.init = function(){ 
      if(this.canvas && this.canvas.getContext('2d')){ 
       this.ctx = this.canvas.getContext('2d'); 

       this.loadImgs(); 
       //set listeners 
       this.canvas.addEventListener('click', this.canvasClick, false); 

       return true; 
      } 

      return false; 
     }; 

     this.setStyle= function(style){ 
      this.style = style; 
     }; 

     this.canvasClick = function(e){ 
      // 

      let x = e.clientX - this.offsetLeft, y = e.clientY - this.offsetTop; 
      //alert('Canvas is clicked! X: ' + x + ",Y: " + y); 

      //why this is a canvas obj not a GameUI obj 
      console.log(/*'in canvasClick: ' + */this); 
     }; 
    };

HTMLコード：

<html> 

<head> 
<title> js test </title> 
<script type="text/javascript" src="game.js"></script> 
<script type="text/javascript" src="ui.js"></script> 

<style type="text/css"> 
    .main{ 
     margin:0 auto; 
     width: 80%; 
    } 
    #canvas{ 
     border:1px solid black; 
    } 

</style> 
</head> 

<body> 

<div class='main'> 
<canvas id='canvas' width='800' height='600'> Your browser is not supported for canvas element </canvas> 
</div> 
<button> new game </button> 
</body> 

</html>

ご覧のように、私は、キャンバスがsurprisely canvasClick.Butという名前のクリック機能と、それにあったGameUIクラスを定義し関数をクリックして、キーワードthisは、GameUIオブジェクトではないキャンバスオブジェクトです。私はログでテストします。これは私を混乱させます！

出典

2017-02-02 stackKKK

'JSでthis'挙動をルックアップ。他のすべての言語と同じように動作しません。長い話を簡単に言えば、 'this'は関数が呼び出されたオブジェクトによって異なります。 – Carcigenicate

JSにはクラスがありません。コンストラクタ関数があります。 – Teemu

は 'のように' this'の参照を格納します。var GameUI = function（）{var self = this; ... 'を使用し、後で' self'を使います – Satpal

イベントハンドラは、別の方法で動作するように指示されていない限り、トリガ要素のコンテキストで実行されます。

これは、bindで変更できます。bindは、他のコンテキストで動作するように指示します。

this.canvas.addEventListener('click', this.canvasClick.bind(this), false);

今、あなたのクリックコールバックで、thisは、クラスのインスタンスを指します。

出典

2017-02-02 11:36:30 Utkanos

Salutの、

パーdéfautラMethodeのaddEventListenner、lorsque L'evenement血清declenchéルcontexte（本）デアタッシェL'のevenementとしてfonctionappelé血清L'素子シュールlequel TU TA。

のSi TU veuxretrouvéトンオブジェgameUi IL TE fautディクレアラートンévénementデラ仕上がり具合suivante

this.canvas.addEventListener('click', this.canvasClick.bind(this), false);

テストらFAIS MOI国連RETOUR

出典

2017-02-02 11:50:07

javascriptのクラス定義、キーワード "this"はクラスを参照していません

答えて

関連する問題