zagwozdka this

Question

Uczę się vue.js ale możliwe że tu chodzi w ogóle o działanie js

Odpalam sobie taki kodzik który ściąga dane z github api: https://vuejs.org/v2/examples/commits.html

Zagwozdkę mam w tym fragmencie

 methods: {
        fetchData: function () {
          var xhr = new XMLHttpRequest()
          var self = this
          xhr.open('GET', apiURL + self.currentBranch)
          xhr.onload = function () {
            self.commits = JSON.parse(xhr.responseText)
            console.log(self.commits[0].html_url)
          }
          xhr.send()
        }
      }

Nie rozumiem po co to var self = this

Nie możemy po prostu użyć zwykłego this?

 methods: {
        fetchData: function () {
          var xhr = new XMLHttpRequest()
          xhr.open('GET', apiURL + this.currentBranch)
          xhr.onload = function () {
            this.commits = JSON.parse(xhr.responseText)
            console.log(this.commits[0].html_url)
          }
          xhr.send()
        }
      }

Ten kod nie działa, nie wywala błędu, ale nic się nie wyświetla

 

Answer 1

This ustawiane jest w zależności od sposobu wywoływania funkcji - chyba, że zmienisz go sam metodą Function.prototype.bind/call/apply.

Przypisując this do zmiennej (o nazwie np. self) przechowujesz sobie kontekst (wykorzystując scope funkcji), na który this wskazuje w momencie jej wołania. Jako, że metoda xhr.onload wywoływana jest w kontekście obiektu xhr, to w środku this wskazuje własnie na xhr. Natomiast, gdy odwołasz się tam do zmiennej self będziesz mieć dostęp do "przechowanego" kontekstu, w którym była wywołana metoda fetchData - jest to obiekt tworzony przez Vue i zapisujesz go do zmiennej demo.

Podobny efekt do zapisu var self = this mógłbyś osiągnąć dzięki metodzie Function.prototype.bind lub Arrow function (można przyjąć, że this w arrow function zachowuje się tak, jak self z zapisu var self = this).

W skrócie:

• zapis var self = this; pozwala przechować kontekst this, który w Twoim przypadku w metodzie fetchData wskazuje na komponent Vue
• wewnątrz metody xhr.onload this wskazuje na obiekt xhr, a Tobie trzeba kontekstu Vue, żeby do niego przypisać pobrane dane. Stąd użycie zmiennej self, żeby skorzystać z kontekstu Vue w momencie wołania metody fetchData

Do poczytania: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Comments

Dzięki wielkie za odpowiedź mam jeszcze pytanie do tego kodu  (jeszcze raz link ) 

data: function () {
        var sortOrders = {}
        this.columns.forEach(function (key) {
          sortOrders[key] = 1
        })
        return {
          sortKey: '',
          sortOrders: sortOrders
        }
      }

Nie wiem jakim cudem tutaj zadziała to sortowanie - z tego co widzę powstanie tablica z ilością elementów tyle ile kolumn, z wartościami 1. Zastanawiam się jaka może być różnica pomiędzy return a zwykłym zdefiniowaniem zmiennej z var

---

Gdy zamiast zwrócenia wartości (w tym przypadku obiektu) przypiszesz ją do zmiennej lokalnej, to będzie ona widoczna tylko w tej funkcji i w funkcjach stworzonych w jej środku. Nie dostaniesz się do tego bezpośrednio z zewnątrz.

W tym przypadku z funkcji data zwracany jest obiekt z referencją do obiektu sortOrders (będzie dostępny na zewnątrz funkcji). Ten obiekt ma propertisy z nazwami kluczy pochodzącymi od wartości elementów tablicy this.columns, a wartościami tych propertisów są jedynki.

Przeanalizuj sobie poniższy kod:

var names = ['Ala', 'Adam'];
var obj = {};

names.forEach(function (key) { // key to poszczególny element tablicy names
	obj[key] = 1; // obj[key] to property; key służy jako klucz; 1 będzie wartością
});

console.log(obj); // {Ala: 1, Adam: 1}