es6, zwracanie pustej tablicy zamiast dwóch obiektów

robbb

2018-07-05T19:43:51+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 3

W zadaniu mam przefiltrować tablicę i wyświetlić kanały premium dla użytkownika jeśli sam posiada status premium.
Dlaczego dla premiumChannels:function(){ dostaję tablice z dwoma elementami czyli tak jak powinno być a dla premiumChannels:() => { jako output dostaje pustą tablicę?

Cały kod:

Kopiuj


const channel = [
    {name:'HBO',premium:true},
    {name:'LIFE',premium:false},
    {name:'Max',premium:true},
    {name:'Cooking channel',premium:false},
    {name:'WOBI',premium:false}
 ];
 const user = {
    name:'Francis',
    premium:true,
    premiumChannels:function(){
        const $this = this;
        return channel.filter((item) =>{
             return item.premium && $this.premium})
    },  
// const user = {
//    name:'Francis',
//    premium:true,
//    premiumChannels:() => {
//        const $this = this;
//        return channel.filter((item) =>{
//            return item.premium && $this.premium})
//    },  
        
    channels:channel.filter((item) => {
        return item.premium == false;
    }),
       
 }
 console.log(user.premiumChannels())
 // array z  HBO and MAX
 console.log(user.channels)
 // array z LIFE, COOCKING CHANNEL i WOBI

Patryk27

2018-07-05T21:09:19+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Wrocław
Postów: 13042

Jak to jest, że korzystasz z funkcji strzałeczkowych (arrow functions), a nie masz pojęcia jak działają i czym różnią się od zwyczajnych? ;-)

robbb

2018-07-05T21:36:30+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 3

Dlatego właśnie próbuje je zrozumieć ;)
Wiem, ze stosuje się je do funkcji anonimowych i nie muszę używać self tylko wystarczy this.
Rozwiązałem ten problem też bez użycia const $this = this bo jest to zbędne.

Kopiuj

premiumChannels:function(){ 
        return channel.filter((item) =>{
             return item.premium && this.premium})
    },

Nadal nie rozumiem dlaczego nie mogę tego samego problemu rozwiązać w ten sposób:

Kopiuj

premiumChannels:() => {  
         return channel.filter((item) =>{
             return item.premium && this.premium})
   },

Patryk27

2018-07-06T09:45:13+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Wrocław
Postów: 13042

Różnica polega na tym, że funkcje strzałeczkowe nie tworzą własnego kontekstu, a są wiązane z kontekstem znajdującym się wyżej:

Kopiuj

const someObject = {

  foo() { // lukier składniowy na: foo: function() {
    console.log(this); // zwróci "someObject"
  },

  bar: () => {
    console.log(this); // zwróci "window"
  },

};

Dlatego też w tym przykładzie:

Kopiuj

premiumChannels:() => {  
         return channel.filter((item) =>{
             return item.premium && this.premium})
   },

this.premium odnosi się do obiektu window, a nie user.

robbb

2018-07-06T11:01:30+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 3

Dzięki za wytłumaczenie ;)

Liczba odpowiedzi na stronę

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto