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

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()函数，它处理各种事件，并调用其他函数来完成事件。为此，我有要唤起的 Action 事件和功能的 map 。类的函数 display() 访问类变量，但由于某种原因 this 在该函数内部未定义。关于为什么以及如何修复它以便我可以访问变量并最好保持代码架构的任何想法？

Answer 1

调用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 作用域和 clojure 的知识。

基本上您需要从这里学习的是，当您在没有任何先验上下文的情况下调用函数时，它不能依赖“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");