Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #29064

Re: Scope of "this" variable

Show key headers only | View raw

Teemu Likonen <tlikonen@iki.fi> writes:

For comment I've duplicated:
Subject: Re: Scope of "this" variable

this is a keyword and not the name of a variable and does not have
scope.  But the object to which the keywords refers does changes as
execution contexts are created, entered and exited.  As such it feels a
bit like something with scope, but trying to fit it into the model of a
scoped name will just cause confusion.

> Code
>
>     var Item = function() {
>         this.variable = "variable";
>         this.fn1 = function() { return this.variable; };
>         this.foo = {
>             fn2: function() { return this.variable; }
>         };
>     };
>
>     var item1 = new Item();
>     console.log(item1.fn1());
>     console.log(item1.foo.fn2());
>
> prints this:
>
>     "variable"
>     undefined
>
> So function item1.fn1 returns the string "variable" but function
> item1.foo.fn2 returns undefined. The variable "this" somehow disappears
> (or doesn't last long enough) when a function object is created inside
> another object {...}. Why?

When you call a method like item1.foo.fn2, part of the process
establishes a value for 'this'.  Calling x.f(...) executes f in a
context in which this refers to x.  Here, 'this' will refer to
item1.foo.  I think you'll agree that you want that behaviour more often
than not.

> I know a work-around:
>
>     var Item = function() {
>         this.variable = "variable";
>         this.fn1 = function() { return this.variable; };
>         var this_object = this;
>         this.foo = {
>             fn2: function() { return this_object.variable; }
>         };
>     };

Or you could write

  this.foo = {
        fn2: (function (outer) {
                  return function() { return outer.variable; };
              })(this)
    };

which is slightly neater using ES6's arrow functions:

  fn2: (outer => { return () => { return outer.variable; }; })(this)

> But I'd like to understand why the first example works the way it does.
> What's the difference between these to examples?

For the details, you need to read through the language standard.  In
particular, section 11.2.3 "Function Calls".

-- 
Ben.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Scope of "this" variable Teemu Likonen <tlikonen@iki.fi> - 2015-12-29 21:34 +0200
  Re: Scope of "this" variable Ben Bacarisse <ben.usenet@bsb.me.uk> - 2015-12-29 20:47 +0000
    Re: Scope of "this" variable Teemu Likonen <tlikonen@iki.fi> - 2015-12-30 10:57 +0200
  Re: Scope of "this" variable Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-12-29 22:09 +0100
  Re: Scope of "this" variable Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-12-29 19:38 -0200
    Re: Scope of "this" variable Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-12-29 19:46 -0200
      Re: Scope of "this" variable Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-12-30 00:42 +0100
    Re: Scope of "this" variable Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-12-30 00:35 +0100
    Re: Scope of "this" variable Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-12-30 02:18 -0200

csiph-web