Why is the "this" keyword is not referring to the state I'd set?

Question

I began studying JavaScript yesterday, today I was at the object and functions topic.

I'd already made this work, but I'm really in doubt why in the dog1 object, if I use the this keyword I just get "undefined" return on the log.

I'd already search this here and on google, but without luck. I'm not looking for a code to solve this, just to understand why in the second case the "this" is not working.

 var dog0 = {
     Name: "Bob",
     color: "Golden",
     breed: "Labrador",
     dogcard1: function() {
        return  "Hi, this is " + this.Name + ", a " + this.color + " " + this.breed ;
     }
 };

 console.log(dog0.dogcard1());


function dogcard(a, b, c) {
    return  "Hi, this is " + a + ", a " + b + " " + c ;
 }

var dog1 = new Object();
dog1.Name = "Suzy";
dog1.color = "black";
dog1.breed = "Bulldog";
dog1.presentation = dogcard(this.Name, dog1.color, dog1.breed);
console.log(dog1.presentation);

You're talking about JavaScript here. Java is to JavaScript as car is to carpet. — Makoto, May 15 '18 at 20:44
Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Cam, May 15 '18 at 20:46
It's working correctly, but not how you expect. Note the distinction. — , May 15 '18 at 20:48
@Cam I'm not even sure this is a dupe, `this` in Javascript can be confusing, but in this instance it's not even a JS oddity,. He's calling `this` not even inside a function.. So what else could the OP think `this` is.. ? — Keith, May 15 '18 at 20:48
Hey Keith, I think you're right -- this is not a duplicate of that question, for the reasons you specified. Retracted vote to close. — Cam, May 15 '18 at 23:15
@Keith So the keyword wouldn't refer to the state Name if it's not in a function? — davimdantas, May 16 '18 at 09:52

score 3 · Accepted Answer · answered May 15 '18 at 20:47

The reason you're getting undefined back is because JavaScript has no earthly clue where Name came from.

In JavaScript, you can rely on three scopes:

Block scope (for if statements, object declarations and loops),
Function scope, and
Global scope (where everything will be hoisted into if not guarded by the other scopes).

If you invoke this, you'll probably see it attached to Window, which is effectively the global space. You don't declare Name there, which makes perfect sense.

Inside of your dog1 object, you have the scope you need to refer to the immediately enclosed object, so this applies. I would still discourage that particular use, though - personal preference - and instead pass the values in so it's crystal clear where everything's coming from.

You probably meant to use dog1 instead of this for that specific variable, so I'd encourage you to fix that typo.

Thank you for your answer, @Makoto . It was not a typo, I did it to show that even inside the `dog1` object, the keyword would return undefined, so it'd apply. — davimdantas, May 16 '18 at 10:16

score 0 · Answer 2 · answered May 15 '18 at 20:48

0

If you are in strict mode, if this was not defined by the execution context, it remains "undefined".

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

answered May 15 '18 at 20:48

MKP

22
3

Why is the "this" keyword is not referring to the state I'd set?

2 Answers2