nested function does not recognize javascript "this" keyword

Question

I can't get my nested function to recognize the "this" keyword. Here is an example. I have a constructor function:

function person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.changeName = changename;
}

I have another function with a nested function:

function changeName (name) {
     this.lastname = name;
     $.post("display.php", "some_data", function(data,status) {
        if (status=="success") {
               alert(this.lastName); //undefined
        }
     }

}

Not that the usual convention for class names is to have them capitalized (i.e. Person, not person). — Denys Séguret
– Denys Séguret, Commented Dec 19, 2014 at 8:11

Sten Muchow · Accepted Answer · 2014-12-19 08:15:57Z

2

The function sets this from the inner function you need to either use .bind or the "hack" of that:

function changeName (name) {

     var that = this;

     this.lastname = name;
     $.post("display.php", "some_data", function(data,status) {
        if (status=="success") {
               alert(that.lastName); //undefined
        }
     }
}

Or by using function.protoype.bind.

function changeName (name) {

     this.lastname = name;
     $.post("display.php", "some_data", function(data,status) {
        if (status=="success") {
               alert(this.lastName); //undefined
        }
     }.bind(this))
}

This is a pretty good explanation

edited Dec 19, 2014 at 8:15

answered Dec 19, 2014 at 8:09

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

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

3 Comments

RobG Over a year ago

this isn't "inherited", it's set by how the function is called.

Sten Muchow Over a year ago

@RobG - agreed, poor choice of words.

user1233147 Over a year ago

Thanks Sten Muchow. Makes perfect sense.

Denys Séguret · Accepted Answer · 2014-12-19 08:09:48Z

1

That's because this, in the event handler, is window. You can define an alias in the changeName scope like this :

function changeName (name) {
     var p = this;
     p.lastname = name;
     $.post("display.php", "some_data", function(data,status) {
        if (status=="success") {
               alert(p.lastName);
        }
     }
}

edited Dec 19, 2014 at 8:09

answered Dec 19, 2014 at 8:08

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Collectives™ on Stack Overflow

nested function does not recognize javascript "this" keyword

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related