无法在特定情况下从类的函数内访问类的变量

Question

由于有很多事情要做，所以我不知道如何最好地解释问题，所以我继续创建了一个样本我在做什么。下面是代码：

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在该函数内部未定义。任何想法，为什么以及如何解决它，以便我可以访问变量，并最好保持代码架构？

在此先感谢。

Answer 1

调用函数函数时的作用域与Class对象的作用域不同。这意味着，“这个” referrs别的东西：

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作用域和clojures。

基本上你需要从这里学习的是，当你调用一个没有任何先前上下文的函数时，它不能依赖“this”。这就是为什么上下文可以使用.call(context,args..)

实例的方法invokation改变：

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