0

I was recently going learning about the this keyword and how it is affected by normal functions function() {...} vs arrow functions ()=>{...}. However, these functions are defined within member functions of a class definition:

// Case 1
// filename = index.js

class myClass{
    myString = undefined;
    myNumber = undefined;
    constructor(aString, aNumber){
        this.myString = aString;
        this.myNumber = aNumber;
    }

    logThisWithRegularFunc(){
        let logger = function(){
            console.log(this);  // Console output = undefined, because function(){} created a new scope/definition for 'this'
        }
        return logger();
    }

    logThisWithArrowFunc(){
        let logger = ()=>{
            console.log(this);  // Console output = myClass { myString: [someString], myNumber: [someNumber] }
        }
        return logger();
    }
}
let dumiObj = new myClass("Hello", 200);
dumiObj.logThisWithRegularFunc();
dumiObj.logThisWithArrowFunc();

The console output is as expected:

$ node index.js
undefined
myClass { myString: 'Hello', myNumber: 200 }
$

However, if I create the same two functions outside of a class as follows:

// Case 2
// filename = index.js

// Regular functions 
function logThisWithRegularFunc(){
    this.someInternalString = "Hello Internal String 1";
    console.log(Object.keys(this));
}

// Arrow Function
let logThisWithArrowFunc = ()=>{
    this.someInternalString = "Hello Internal String 1";
    console.log(Object.keys(this));
}

logThisWithRegularFunc();
logThisWithArrowFunc();

I get the following output:

$ node index.js
<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
  },
  queueMicrotask: [Function: queueMicrotask],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
  },
  someInternalString: 'Hello Internal String 1'
}
{ someInternalString: 'Hello Internal String 1' }
$

What could be the reason for this? How are the two cases different? How can the behavior of these two functions be justified in these two cases?

P.S. Thanks in advance! :-)

Sourav Ray Chaudhuri
  • 1
  • You may want to have a look at this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#function_context Also if you called the regular function with `new` keyword like this `new logThisWithRegularFunc();` then you get its own `this scope` – Molda Mar 09 '21 at 18:31
  • Also `this` within arrow function refers to global this(or outer this when within another function) . You can verify that by calling `console.log(this)` after `logThisWithArrowFunc();` it will print `{ someInternalString: 'Hello Internal String 1' }` just like it does within the arrow function – Molda Mar 09 '21 at 18:37

0 Answers0