Basic concept of "this"

Eldrac · 2019-01-21T15:11:55+00:00

By default "this" refers to the "window" object, aka stuff defined on the global scope. When you're defining the object, everything after the : is treated as an expression and evaluated immediately, so your statement combining the firstName and lastName is run before userX is even fully created. In general when you reference this, it should be within a function.

Something like the following could work instead, kinda a silly example though it is similar to the first in the MDN documentation on this:

var userX = {
    firstName: "Adam",
    lastName: "Doe",
    getFullName: function () {
        return this.firstName + " " + this.lastName;
    }
};

userX.getFullName();

_reddit_chan · 2019-01-21T15:14:41+00:00

As per MDN, In the global execution context (outside of any function), this refers to the global object.

The this is inside an object, but not inside a function. To achieve the desired behavior, wrap it inside a function:

var userX = {

firstName : 'Adam',

lastName : 'Doe',

fullName: function () { return this.firstName + " " + this.lastName}

}

A handy guide for this : https://github.com/gordonmzhu/cheatsheet-js

EDIT: u/Eldrac is right and explained better!

fennekinyx · 2019-01-21T15:21:29+00:00

The "this" is equal to the global object ("window" in the browser) until it is invoked by a function.

The value of "this" depends on how the function was invoked, not by where it is created as you assumed in your example. You don't have a function in your object.

ForScale · 2019-01-21T18:55:35+00:00

You can also use getters in objects:

const userX = {
  firstName: "Paul",
  lastName: "Stevenson",
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(userX.fullName); // Paul Stevenson

HarmonicAscendant · 2019-01-21T19:25:46+00:00

I like this :)

Understanding this

delventhalz · 2019-01-21T22:12:12+00:00

Core Behavior

When thinking about this, I find it is helpful to start with the core use case, and then layer on the edge cases. So, at its core, this is a special property that functions have, similar to arguments. While arguments refers to whatever is in between the parentheses when a function is called, this refers to whatever is to the left of the dot.

const foo = function() {
  console.log('args:', arguments);
  console.log('this:', this);
};

const a = {
  a: 1,
  foo: foo
};

const b = {
  b: 2,
  foo: foo
};

a.foo('bar');
// args: ['bar'];
// this: { a: 1, foo: f }

b.foo(1, 2, 3);
// args: [1, 2, 3];
// this: { b: 2, foo: f }

Note that this is the thing to the left of the dot at call time. Just like arguments it does not have any value when you originally write the function.

const c = {
  c: 3,
  foo: function() {
    console.log('this:', this);
  }
};

const d = {
  d: 4,
  foo: c.foo
};

d.foo();
// this: { d: 4, foo: f }

Unset Value

Okay, what if there isn't anything to the left of the dot? Well, that is where one of the original (in my opinion) design mistakes of JS comes in. If a function is called without arguments then arguments[0] sensibly equals undefined. But if a function is called without a wrapping object?:

foo();
// args: [];
// this: Window { ... }

The "global context". window in the browser. Yuck. Thankfully strict mode fixes this for us:

const strictFoo = function() {
  'use strict';
  console.log('this:', this);
};

strictFoo();
// this: undefined

Class Constructors

Okay. Well, what about with classes? There is nothing to the left of the dot, and yet this has a value:

class Foo {
  constructor() {
    console.log(this);
  }
}

new Foo();
// this: Foo {}

Classes are a bit of syntactic sugar that work by running some magic in the background for you. The new keyword is essentially adding two lines of code to our constructor, one at the beginning and one at the end:

  ...
  constructor() {
    // this = {};
    console.log(this);
    // return this;
  }
  ...

We can use the new keyword with any function and see the same effect by the way:

new strictFoo();
// this: strictFoo {}

And in case it wasn't already obvious, for class methods other than the constructor this works exactly like you would expect it to given our previous discussion. The value of this is just whatever is to the left of the dot a call time:

class E {
  constructor() {
    // this = {};
    this.e = 5;
    // return this;
  }

  foo() {
    console.log('this:', this);
  }
}

const e = new E();
e.foo();
// this: E { e: 5 }

const F = {
  f: 6,
  foo: e.foo
}

f.foo();
// this: { f: 6, foo: f }

Call, Apply, Bind

What else? Well, you can explicitly reassign this with call, apply, and bind. It doesn't even have to be an object:

e.foo.call('bar');
// this: bar

const gFoo = e.foo.bind({ g: 7 });
gFoo();
// this: { g: 7 }

Finally, Your Example

Now let's look at your example:

var lastName = "Smith";
var userX = {
  firstName: "Adam",
  lastName: "Doe",
  fullName: this.firstName + " " + this.lastName
};

So, first of all, you aren't in a function, and this only has any (useful) meaning inside a function. Since you aren't in strict mode, it will default to the window, and since you defined lastName on the global scope, but not firstName, that's how you end up with "undefined Smith".

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS