JavaScript prototype 'this' issue

Question

This is a follow up question from my last question.

I am a bit new using JavaScript prototype so sorry for the second post.

I want to assign the clicked element id to the this.name array.

task.prototype.init=function(){  
      this.name=[];  //this.name array has to be defined here

        for (var i; i<5; i++){
            var Link=document.createElement('a');
                Link.innerHTML='click';
                Link.id=value[i];   //I want to assign the value to the this.name array
                Link.href='#'
                Link.onclick=this.changeName;
                document.body.appendChild(Link);
         }
}
task.prototype.changeName=function(){  

     //How do I push the this.id to the property this.name?

     //the code below won't work because this refer to the <a> element. 
     this.name.push(this.id);     

    return false;
    }

Any tips for the task?

Possible duplicate of JavaScript Callback Scope and addEventListener and the scope of this and many others. — katspaugh
– katspaugh, Commented Dec 21, 2012 at 20:41
I think 'name' is actually reserved as well.callee: function () { arguments: null caller: null length: 0 name: "" — Joe
– Joe, Commented Dec 21, 2012 at 20:41

bfavaretto · Accepted Answer · 2012-12-21 20:38:49Z

15

Your prototype is okay, the problem is that this on event handlers is always the element that caused the event to be triggered. In JavaScript, the value of this inside a function depends on how the function is called.

If you want this to be bound to a certain value, you can create a bound function with Function.prototype.bind:

var newChangeName = this.changeName.bind(this);
Link.onclick = newChangeName;

Note however that bind is IE9+ only. A workaround would be:

var that = this;
Link.onclick = function() {
    that.changeName();
};

(Style note: I'd use link instead of Link; the convention in js is to leave uppercase initials to constructors).

edited Dec 21, 2012 at 20:38

answered Dec 21, 2012 at 20:32

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JohnnyHK · Accepted Answer · 2012-12-21 20:34:01Z

1

Use bind to set the desired this for the changeName callback:

Link.onclick=this.changeName.bind(this);

answered Dec 21, 2012 at 20:34

JohnnyHK

313k70 gold badges632 silver badges479 bronze badges

Collectives™ on Stack Overflow

JavaScript prototype 'this' issue

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related