0

可能重复：
如何将 this 上下文传递给事件处理程序？

我正在做一个与 Javascript 相关的作业，并且需要制作一个与特定输入相关联的日历。

日历不断显示，不隐藏等。

可以有多个日历指向不同的文本字段。

现在，每个日历都是由一个 Javascript 对象创建的，即

var cal1=new Calendar("inputfield_id");

现在日历对象有一些我想在点击日历时访问的变量。

所以基本上，我的问题是，有没有办法为 onclick 事件获取特定对象，即当您在对象中时以某种方式获取“this”变量。

这是一小部分代码来解释我正在尝试做的事情：

function calendar(id){
   this.date=new Date();
   this.id=id;
   this.next_year=function(){
        this.date.setFullYear(this.date.getFullYear()+1);
        alert(this.date); // basically I want to get object context here to change date
   }

   var temp_but=document.createElement("button").onclick=this.next_year;
   document.getElementById(id+"_div").appendChild(temp_but);
   document.getElementById(id+"_div").lastChild.onclick=this.next_year;

}

基本上，在this.nextyear功能上，我想获取对象上下文以获取日期并相应地更改日历。

4

1 回答 1

4

我想这就是你想要做的......

function calendar(id){
   this.date=new Date();
   this.id=id;
   var context = this;
   this.next_year=function(){
        context.date.setFullYear(context.date.getFullYear()+1);
        alert(context.date);//basically i want to get object context here to change date
   }

   var temp_but=document.createElement("button").onclick=this.next_year;
   document.getElementById(id+"_div").appendChild(temp_but);
   document.getElementById(id+"_div").lastChild.onclick=this.next_year;

}

本质上，我们使用闭包来保存对this被调用的引用context。this.next_year现在通过context.

编辑：响应 OP 发布的评论的一点 JS 课程。

当您调用一个函数作为构造函数（即）时，会创建一个新的空对象，并在新空对象的上下文中执行该函数。new calendar("example")

注意：它实际上不仅仅是一个空对象。它是一个空对象，在幕后具有某些内部指针，用于原型继承之类的事情。

随便！在整个函数中，对 this 的任何引用都是指当前上下文。而且，因为当您使用函数作为构造函数时，它会在新创建的对象的上下文中调用该函数，所以您可以使用this.someProperty.

当您执行语句var cal1=new calendar("inputfield_id");时，会创建一个新对象，并且您的函数calendar会在所述对象的上下文中执行。因此，this.date=new Date();并且this.id=id正在设置新日历对象的date和id属性。

我假设您实际上并没有难以理解这里发生的事情：this.id=id;而是为什么this关键字在this.next_year.

让我们从一个可行的场景开始。如果您要调用cal1.next_year();，您将next_year()在 的上下文中调用cal1，因此this.date.setFullYear(this.date.getFullYear()+1);将按cal1预期将 的 date 属性增加 1 年。

它在 click 事件处理程序中不起作用，因为当您设置事件处理程序时，您有点说“当触发 'click' 事件时，执行此函数”而不是“当触发 'click' 事件时，执行此语句“。

实际执行的功能是：

   function(){
        this.date.setFullYear(this.date.getFullYear()+1);
        alert(this.date);
   }

并且您期望执行的语句是：

   this.next_year(); //where this refers to the calendar object.

当这段代码执行时，

elem.onclick = this.next_year;

就像说一样，

elem.onclick = function(){
    this.date.setFullYear(this.date.getFullYear()+1);
    alert(this.date);
}

因此，如果这还不够清楚地说明问题，让我再进一步解释一下，elem在使用elem.onclick=this.next_year;. 我喜欢把它想象成浏览器正在调用elem.onclick([Event event]);. 本质上，您使用的函数elem.onclick=在上下文中执行，elem并且Event对象作为第一个也是唯一的参数传入。

为了清楚起见并把要点带回家，this函数中的关键字指向当浏览器作为事件处理程序调用它时被单击的元素。

   function(){
        this.date.setFullYear(this.date.getFullYear()+1);
        alert(this.date);
   }

对于过度解释和重复/冗余，我深表歉意。我尽量让我的答案简短，因为我通常不擅长解释事情：P

PS - 不要忘记接受！

于 2012-10-14T06:46:56.710 回答