無法在特定情況下從類的函數內訪問類的變量

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