Question

可能重复：
How do I pass the this context into an event handler?

我正在进行与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函数中，我想获取对象上下文来获取日期并相应地更改日历。

Answer 1

我认为这就是你要做的......

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")），将创建一个新的空对象，并在新的空的上下文中执行该函数对象

注意：它不是只是一个空对象。它是一个空对象，在幕后有一些内部指针用于原型继承。

Anywho！在整个函数中，对此的任何引用都指当前上下文。并且，因为当您使用函数作为构造函数时，它在新创建的对象的上下文中调用函数，您可以使用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的日期属性增加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);
}

因此，如果这不能使问题足够清楚，那么让我再进一步说明在使用{{1}设置单击处理程序后单击元素elem时实际发生的情况}。我喜欢把它想象成浏览器正在调用elem.onclick=this.next_year;。实质上，使用elem.onclick([Event event]);设置的函数在elem.onclick=的上下文中执行，elem对象作为第一个也是唯一的参数传入。

要明确清楚并将点驱动回家，函数中的Event关键字指向浏览器作为事件处理程序调用时单击的元素。

this

我为过度解释和重复/冗余而道歉。我试着保持我的答案简短，因为我总是很难解释事情：P

PS - 别忘了接受！

javascript onclick事件调用对象

1 个答案: