Welcome to the Linux Foundation Forum!

Function context scope doubt

Hi everybody,
Hope you all are doing great.

I have a question regarding how object's context works on functions at Node.JS.
For example:

  1. function nestedFunctions() {
  2. var a = "I am a variable"
  3. console.log("Initial context:")
  4. console.log(this)
  5.  
  6. function one() {
  7. console.log("First nested function, this is my this context:")
  8. console.log(this)
  9. console.log("First nested function, this is my a value:")
  10. console.log(a)
  11.  
  12. function two() {
  13. console.log("Second nested function, this is my this context:")
  14. console.log(this)
  15. console.log("Second nested function, this is my a value:")
  16. console.log(a)
  17. }
  18. two()
  19. }
  20. one()
  21. }
  22. nestedFunctions()

The output of that code is:

  1. Initial context:
  2. Object Global
  3. First nested function, this is my this context:
  4. Object Global
  5. First nested function, this is my a value:
  6. I am a variable
  7. Second nested function, this is my this context:
  8. Object Global
  9. Second nested function, this is my a value:
  10. I am a variable

Everything OK so far, because the function context (this) is created on global scope, and so the nested functions. But my doubt is when running the following code:

  1. class Dog {
  2. constructor(name) {
  3. this.name = name
  4. }
  5.  
  6. bark() {
  7. console.log(`Woof, my name is ${this.name}`);
  8. }
  9. nestedFunctions() {
  10. var a = "I am a variable"
  11. console.log("Initial context:")
  12. console.log(this)
  13.  
  14.  
  15. function one() {
  16. console.log("First nested function, this is my this context:")
  17. console.log(this)
  18. console.log("First nested function, this is my a value:")
  19. console.log(a)
  20.  
  21. function two() {
  22. console.log("Second nested function, this is my this context:")
  23. console.log(this)
  24. console.log("Second nested function, this is my a value:")
  25. console.log(a)
  26. }
  27. two()
  28. }
  29. one()
  30. }
  31. }
  32.  
  33. let rex = new Dog('Rex')
  34. //rex.sitAndBark()
  35. rex.nestedFunctions()

Output:

  1. Initial context:
  2. Dog { name: 'Rex' }
  3. First nested function, this is my this context:
  4. undefined
  5. First nested function, this is my a value:
  6. I am a variable
  7. Second nested function, this is my this context:
  8. undefined
  9. Second nested function, this is my a value:
  10. I am a variable

I am having troubles understanding that last one, and why the this of the nested functions is undefined. Why isn't the global context instead of undefined (like when declared outside a class, i.e, the first example)?

Best regards to all

Welcome!

It looks like you're new here. Sign in or register to get started.
Sign In

Comments

  • Another example with the function defined on an object:

    1. var rex = {
    2. nestedFunctions() {
    3. var a = "I am a variable"
    4. console.log("Initial context:")
    5. console.log(this)
    6.  
    7.  
    8. function one() {
    9. console.log("First nested function, this is my this context:")
    10. console.log(this)
    11. console.log("First nested function, this is my a value:")
    12. console.log(a)
    13.  
    14. function two() {
    15. console.log("Second nested function, this is my this context:")
    16. console.log(this)
    17. console.log("Second nested function, this is my a value:")
    18. console.log(a)
    19. }
    20. two()
    21. }
    22. one()
    23. }
    24. }
    25.  
    26. rex.nestedFunctions()

    The output in that case is:

    1. Initial context:
    2. { nestedFunctions: [Function: nestedFunctions] }
    3. First nested function, this is my this context:
    4. Object Global
    5. First nested function, this is my a value:
    6. I am a variable
    7. Second nested function, this is my this context:
    8. Object Global
    9. Second nested function, this is my a value:
    10. I am a variable

    Which is the same behaviour of the first example. I don't get why in the second case, the one on a class definition, the result of the nested "this" is undefined instead of the global context.

  • Got the answer:
    That's because the body of a JavaScript class executes in strict mode. This mode, as its name suggests, is a bit more restrictive. Among the features of this execution mode, this doesn't refer to window inside a function that is being called as a bare function, it returns undefined instead.

    Object's context ('this') between nested functions at a class

  • @IgnacioAcuna Exactly correct :+1:

Welcome!

It looks like you're new here. Sign in or register to get started.
Sign In

Welcome!

It looks like you're new here. Sign in or register to get started.
Sign In

Categories

Upcoming Training