2

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?

Pointy
  • 405,095
  • 59
  • 585
  • 614
Yu Lin Chen
  • 571
  • 1
  • 6
  • 9
  • 1
    see this [post](http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) about `this` – Grundy Sep 06 '15 at 14:09
  • Putting a function around `object.getName` in case 2 does nothing; that's why you get the same result as case 1. – Pointy Sep 06 '15 at 14:09
  • 1
    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 Sep 06 '15 at 14:32

1 Answers1

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.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • Can i ask just one question - console.log in case 3. returns string(?) 'result'. What it means? – sinisake Sep 06 '15 at 14:11
  • @nevermind well the `getName` function is still called, with `this` set to `window`, so you're seeing the value of `window.name`. – Pointy Sep 06 '15 at 14:13
  • thanks! Yes i thought that 'this' is related to global object in 3. case, just 'result' confused me, expected 'undefined'... (jsfiddle:)) – sinisake Sep 06 '15 at 14:14
  • 1
    @nevermind—in a browser, the result isn't *undefined*. – RobG Sep 06 '15 at 14:34
  • @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. – RobG Sep 06 '15 at 14:36
  • @RobG well that's sort-of what I mean; the order of execution derives from the outcome of the parse. Of course the gratuitous set of parentheses in case 2 changes nothing. – Pointy Sep 06 '15 at 14:38
  • @RobG, yes, thanks, i see: https://developer.mozilla.org/en-US/docs/Web/API/Window/name (maybe one day i will read this all:)) – sinisake Sep 06 '15 at 15:21
  • @RobG Yeah sorry about not clarifying this. When you use "strict mode" this is undefined. If not, in the browser, it's window. – Yu Lin Chen Sep 06 '15 at 17:59