przekazywanie parametru this do arrow function

Question

const fun = function() {
  console.log(this);
}

const arrowFun = () => {
  console.log(this);
}

fun.call('foo') // foo
arrowFun.call('foo') // [object Window]

czemu???? 

Answer 1

Bo funkcje strzałkowe nie mają swojej wartości this. Dziedziczą ją z wyższego zakresu w tym przypadku obiektu window.

Comments

Nie da się tego jakoś obejść?

---

cała sytuacja : 

// main.js

import Query from './query.js';
const header = new Query('h1');

header.each(function() {
  console.log(this) // [object HTMLHeadingElement]
})

header.each(() => {
  console.log(this) // ( ͡° ᨓ ͡° )
})

 

// query.js 

export default class {

   constructor(selector, baseElement = document) {
     this.selector = [...baseElement.querySelectorAll(selector)];
   }

   each(fun) {
     this.selector.forEach(element => fun.call(element))
   }

}

 

---

Najprościej będzie użyć zwykłej funkcji.

---

Zależy mi żeby można było użyć strzałkowej...

---

Zależy mi żeby można było użyć strzałkowej...

Dlaczego? 

---

Bo robię bibliotekę DOM i miło by było gdyby można było użyć funkcji strzałkowej (podanej jako parametr do metody) (najprawdopodobniej i tak nikt z niej nie będzie korzystał więc dla własnej satysfakcji).

---

dla własnej satysfakcji

arrow function nie wprowadzono żeby skrócić zapis czy dla satysfakcji, ale po to, aby uprościć precyzyjne wskazywanie this...

To, że w ES6 wprowadzono arrow function nie oznacza od razu, że należy zrezygnować z "tradycyjnych" wersji.

---

Czyli zrobić się tego nie da?

---

Bez sensu jest zmieniać zastosowanie funkcji strzałkowej mając do dyspozycji zwykłą funkcję, która działa w pożądany sposób.