1

たくさんのことが起こっているので、質問を最もよく説明する方法がわからなかったので、先に進んで、私がやっていることのサンプルを作成しました. 以下はコードです：

var cl = new Class();
cl.handleAction("triggerScream");
cl.handleAction('triggerDisplay');



function Class()
{
  //function which will print static string
  this.scream = function(){
    document.write("AAAAAAA!!!<br/>");
  }


  //function which will print the class variable
  this.display = function(){
    document.write( this.color );
  };


  //sample class variable
  this.color = 'red';


  //map of actions
  this.actions = {
    'triggerDisplay' : this.display,
    'triggerScream' : this.scream
  };


  //generic function that handles all actions
  this.handleAction = function(action){
    try{
      this.actions[action]();
    }catch(err)
    {
      document.write("Error doing "+action);
    }
  };
}

そして、これが jsbin リンクです: http://jsbin.com/etimer/2/edit

要約すると、handleAction()さまざまなイベントを処理し、他の関数を呼び出してイベントを完了する関数があります。そのために、呼び出すアクション イベントと関数のマップがあります。クラスの関数display()はクラス変数にアクセスしますが、何らかの理由thisでその関数内で定義されていません。変数にアクセスし、できればコードアーキテクチャを維持できるように、それを修正する理由と方法についてのアイデアはありますか?

前もって感謝します。

4

1 に答える 1

5

関数 function を呼び出したときのスコープは、Class オブジェクトのスコープとは異なります。つまり、「これ」は別のものを指します。

function Class()
{
  //function which will print static string
  this.scream = function(){
    document.write("AAAAAAA!!!<br/>");
  }


  //function which will print the class variable
  this.display = function(){
    document.write( this.color );
  };

  //sample class variable
  this.color = 'red';



 //generic function that handles all actions
     this.handleAction = function(action){
    try{
      //you are calling the function in another scope
      this.actions[action]();
    }catch(err)
    {
      document.write("Error doing "+action);
    }
  };
}

代わりに、次のことができます。

function Class()
{
  //function which will print static string
  this.scream = function(){
    document.write("AAAAAAA!!!<br/>");
  }


  //function which will print the class variable
  this.display = function(){
    document.write(color);
  };


  //sample class variable
  //this way it's available to all inside functions
  var color = 'red';
}

これは簡単な章ではありませんが、javascript のスコープとクロージャについてもっと学ぶことをお勧めします。

基本的にここから学ぶ必要があるのは、事前のコンテキストなしで関数を呼び出す場合、「this」に依存できないということです。そのため、次を使用してメソッド呼び出しのコンテキストを変更できます.call(context,args..)

例：

function Class()
{
  //we store the context
  var scope=this;
  //function which will print static string
  this.scream = function(){
    document.write("AAAAAAA!!!<br/>");
  }


  //function which will print the class variable
  this.display = function(){
    document.write(this.color);
  };


  //sample class variable
  this.color = 'red';


  //map of actions
  this.actions = {
    'triggerDisplay' : this.display,
    'triggerScream' : this.scream
  };


  //generic function that handles all actions
  this.handleAction = function(action){
    try{
      //we call our function in the Class context
      this.actions[action].call(scope);
    }catch(err)
    {
      document.write("Error doing "+action);
    }
 };
}
var cl = new Class();
cl.handleAction("triggerScream");
cl.handleAction("triggerDisplay");
于 2012-07-30T21:43:14.187 に答える