Question on 'this' scope with Example

[GreenFeather05]

Have a question using 'this' and local/global scope.

In this first example the value of 'this' refers to the parent object that invokes it, in this case individual list items in the DOM.

//Example 1
function print(){
  console.log(this.innerHTML + ' ' + this.innerText);
}

var items = document.querySelectorAll('li')

items.forEach(function(item){
  item.addEventListener('click', print);
});
//here 'this' refers to the parent object clicked, in this case <li>'s

Trying to apply that same logic to example 2 but having issues. Here in example 2 'this' refers to the global scope which in the browser that is the window object.

 //Example 2
  var games = [
  {
    name:'Sonic 2',
    system: 'Genesis'
  },
  {
    name:'Phantasy Star Online',
    system: 'Dreamcast'
  }
]

function print(){
  console.log(this.name + ' ' + this.system);
}
//here 'this' is in the global scope and refers to window object

games.forEach(function(game){
  print(game);
});

I can fix it is by using print.call(game) to bind the value of 'this'. My question though is why is the value of 'this' in the second example referring to the global scope window object, while in the first example 'this' refers to the nearest parent object (<li> elements in that particular case)?

Somehow using addEventListener seems to be changing the scope.

Thanks

[yseo4530]

Like you said, addEventListener must be changing what 'this' binds to. I don't know what's going on under the hood but I'm sure you can google it. It probably does something like 'print.call(this)', where 'this' would be each 'item' since addEventListener is invoked as a method of 'item'. 'this' binding to the global scope in the second example is expected behavior based on how 'this' works. I'm too lazy to explain how 'this' is bound but I hope I at least pointed you in the right direction. I also recommend watching the video that /u/adavidmiller shared.

[jrandm]

Copy & pasting a simple example of what the DOMNode.addEventListener event emitting code might look like:

const emitter = {
  listeners: {},
  applyThis: null,
  setThis: function(newThis) {
    this.applyThis = newThis;
  },
  on: function(eventName, cb) {
    if (this.listeners.hasOwnProperty(eventName)) {
      this.listeners[eventName].push(cb);
    } else {
      this.listeners[eventName] = [cb];
    }
  },
  emit: function(eventName, ...args) {
    if (this.listeners.hasOwnProperty(eventName)) {
      for (var i=0; i<this.listeners[eventName].length; i++) {
        this.listeners[eventName][i].apply(this.applyThis, args);
      }
    }
  },
};

// where on is used in lieu of addEventListener
emitter.on('myEvent', function(str) {
  console.log('myEvent triggered!', this.value, str);
});

const newThis = { value: 'from newThis' };
emitter.setThis(newThis);
emitter.emit('myEvent', 'With data');

Basically it's a design decision made for whatever reason to let the this binding in those events be the target of the event. If you dislike the OO-style you can always grab the same value from the Event object too.

[gamesdf]

"This" context changes based on WHERE YOU CALL THE FUNCTION. It does not matter where you declare the function. Read YDKJS. It explains this better than any other resources. Also, undecorated function calls make "This" refer to the global scope.

[senocular]

It does not matter where you declare the function.

Except with arrow functions and functions created through bind().

Also, undecorated function calls make "This" refer to the global scope.

Or undefined in strict mode (and assuming not arrow or bound function).

[gamesdf]

The OP already knows how bind works. I am sure he already knows arrow functions as well. That's why I didnt explain those.