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

Question

hope you all are doing great.

I have a question regarding how object's context works on functions at Node.JS (or JS in general). I understand that "when you invoke a top-level function in Javascript, the this keyword inside the function refers to the default object". For example, I have the following function:

function nestedFunctions() {
    var a = "I am a variable"
    console.log("Initial context:")
    console.log(this)
 
    function one() {
        console.log("First nested function, this is my this context:")
        console.log(this)
        console.log("First nested function, this is my a value:")
        console.log(a)
 
        function two() {
            console.log("Second nested function, this is my this context:")
            console.log(this)
            console.log("Second nested function, this is my a value:")
            console.log(a)
        }
        two()
    }
    one()
}
nestedFunctions()

Which give the following output:

Initial context:
Object Global
First nested function, this is my this context:
Object Global
First nested function, this is my a value:
I am a variable
Second nested function, this is my this context:
Object Global
Second nested function, this is my a value:
I am a variable

So far, everything OK, functions gets the global context. When I try whith:

var rex = {
    nestedFunctions() {
        var a = "I am a variable"
        console.log("Initial context:")
        console.log(this)
 
 
        function one() {
            console.log("First nested function, this is my this context:")
            console.log(this)
            console.log("First nested function, this is my a value:")
            console.log(a)
 
            function two() {
                console.log("Second nested function, this is my this context:")
                console.log(this)
                console.log("Second nested function, this is my a value:")
                console.log(a)
            }
            two()
        }
        one()
    }
}
 
rex.nestedFunctions()

The output is:

Initial context:
{ nestedFunctions: [Function: nestedFunctions] }
First nested function, this is my this context:
Object Global
First nested function, this is my a value:
I am a variable
Second nested function, this is my this context:
Object Global
Second nested function, this is my a value:
I am a variable

Everything good so far. The parent function gets the "this" = { nestedFunctions: [Function: nestedFunctions] } because is the object context, and the nested functions gets the global context because they are not bind to the parent context.

But my doubt is in the next case:

class Dog {
    constructor(name) {
        this.name = name
    }
 
    bark() {
        console.log(`Woof, my name is ${this.name}`);
    }
    nestedFunctions() {
        var a = "I am a variable"
        console.log("Initial context:")
        console.log(this)
 
 
        function one() {
            console.log("First nested function, this is my this context:")
            console.log(this)
            console.log("First nested function, this is my a value:")
            console.log(a)
 
            function two() {
                console.log("Second nested function, this is my this context:")
                console.log(this)
                console.log("Second nested function, this is my a value:")
                console.log(a)
            }
            two()
        }
        one()
    }
}
 
let rex = new Dog('Rex')
rex.nestedFunctions()

In where the output is:

Initial context:
Dog { name: 'Rex' }
First nested function, this is my this context:
undefined
First nested function, this is my a value:
I am a variable
Second nested function, this is my this context:
undefined
Second nested function, this is my a value:
I am a variable

Why the "this" context on the nested functions is in this case "undefined" instead of the global context, like the previous examples? Why the default context is undefined (instead of "global") when dealing with classes?

Answer 1

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.