0

I am curios why this ES6 code outputs undefined:

class Test {
  constructor(name) {
    this.name = name;
  }
  
  log() {
    console.log(this);
  }

}


const t = new Test('asd');
const asd = t.log;
asd();

but this ES5 code outputs window.

 function Test(name) {
   this.name = name;
 }
 
 Test.prototype.log = function() {
   console.log(this)
 }
 
 const t = new Test('newer test');
 const asd = t.log;
 asd();

Techincally with something is invoked in the globar score it has window.thatSomething in front but apparently if thatSomething is a class there is no window.

VLAZ
  • 18,437
  • 8
  • 35
  • 54
  • The two are not equivalent - `class` stuff will be executed in strict mode by default. The second piece of code will behave the same if it was in strict mode. – VLAZ Sep 24 '19 at 10:24

1 Answers1

0

This is because the class by default makes your code use strict mode. Normally, the value of this will be assigned to the global object (window) if not determined but in strict mode, it's set to undefined to prevent accidental problems like using properties of the global object:

function sayName() {
  console.log("Hello, my name is " + this.name + "!");
}

function sayNameStrict() {
  "use strict";
  console.log("Hello, my name is " + this.name + "!");
}

let obj = {
  name: "Fred",
  sayName: sayName,
  sayNameStrict: sayNameStrict
}

obj.sayName(); //this = obj, this.name = "Fred

sayName(); //this = window, this.name = window.name

obj.sayNameStrict(); //this = obj, this.name = "Fred

sayNameStrict(); //this = undefined, this.name = TypeError

So, if you execute your second piece of code in strict mode, you'll get the same outcome as the ES6 class:

"use strict";

function Test(name) {
  this.name = name;
}

Test.prototype.log = function() {
  console.log(this)
}

const t = new Test('newer test');
const asd = t.log;
asd();
VLAZ
  • 18,437
  • 8
  • 35
  • 54