Javascript this undefined after function assignment

Question

So I was reading the book Professional Javascript for Web developers and came across the following examples.

var object = {
  name: "my Object",
  getName: function() {
    return this.name;
  }
}

The author then shows the following results:

object.getName(); // "my Object"
(object.getName)(); // "my Object"
(object.getName = object.getName)() // "undefined"

I understand the first case but have the following questions for case 2 and case 3.

Case 2: What does putting a parentheses around object.getName do? So far I only know that you can put parentheses around anonymous function to call it immediately (Immediately-invoked function expression). But what if the function is not anonymous?

Case 3: Why is this not maintained after the assignment?

Putting a function around object.getName in case 2 does nothing; that's why you get the same result as case 1. — Pointy
– Pointy, Commented Sep 6, 2015 at 14:09
In browsers, the last example doesn't return undefined, it returns an empty string. The function is called without setting this, so it will default to the global object (or undefined in strict mode, but this isn't strict mode code), which is window in a browser, and window objects have a default name property which, if not set to some value, will be an empty string. — RobG
– RobG, Commented Sep 6, 2015 at 14:32

Pointy · Accepted Answer · 2015-09-06 14:12:18Z

1

The issue here really doesn't have anything to do with this changing. What's different about the third case is that the value used as the function reference has lost its relationship to the context object.

When a function reference is obtained by evaluating an object property reference, and then that function is invoked, JavaScript makes sure that this in the function is set to the object involved. That's how the first two cases work.

In the third case, the function reference is originally obtained from the object, but the overall value of

(object.getName = object.getName)

is the value of that = assignment. Because of that, the relationship to the object is broken, and all you've got is a reference to a function. The invocation therefore won't set this. It's as if you'd written:

var something = object.getName;
something();

That also won't set this to object. Only when the function reference comes straight from a . or [ ] operation will the object involved end up as this in the call. The parentheses in case 2 are sort-of a special case; in JavaScript, parentheses do not evaluate to anything; they affect the way the expression is parsed but they don't actively do anything.

edited Sep 6, 2015 at 14:12

answered Sep 6, 2015 at 14:08

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

8 Comments

sinisake Over a year ago

Can i ask just one question - console.log in case 3. returns string(?) 'result'. What it means?

Pointy Over a year ago

@nevermind well the getName function is still called, with this set to window, so you're seeing the value of window.name.

sinisake Over a year ago

thanks! Yes i thought that 'this' is related to global object in 3. case, just 'result' confused me, expected 'undefined'... (jsfiddle:))

RobG Over a year ago

@nevermind—in a browser, the result isn't undefined.

RobG Over a year ago

@Pointy—"…they affect the way the expression is parsed…" really should be "they group expressions and can affect the order of execution". Since there's only one expression inside the brackets, the order of execution isn't changed.

|

Collectives™ on Stack Overflow

Javascript this undefined after function assignment

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related