this w JS — czyli kilka słów o kontekście wywołania funkcji #76
Replies: 5 comments 9 replies
-
Jako uzupełnienie świetnego artykułu dodam tylko taki mały przykład: //Składnia metody Array.prototype.map:
//arr.map( callback function [, thisObject] );
const arr = [5,10];
const thisObj = { x: 100 };
arr.map( ( number ) => number * this.x, thisObj ); [NaN, NaN]
arr.map( function( number ) {
return number * this.x;
}, thisObj ); [500, 1000]
Oczywiście w strict mode dostaniemy błąd, dlatego celowo nie owijałem tego w IIFE z 'use strict'. W praktyce w sumie nie korzystałem jeszcze ze wskazywania drugiego argumentu dla metod Array.prototype ale jak już jesteśmy w temacie this to można wspomnieć, że użycie arrow function nie pozwala na to. Jest to oczywiście wynikiem precyzyjnego wskazywania this dla arrow function co opisałeś i nie ma od tego wyjątków :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
To kolejny - świetny - przykład pułapki w jaką można wpaść w odniesieniu do this. Dzięki! Przy jego okazji wspomniałbym o dwóch rzeczach jakie przychodzą mi do głowy. Z jednej strony w praktyce do Druga rzecz, o której warto pamiętać to fakt, że w ogromnej większości środowisk produkcyjnych taki kod by zadziałał. Dlaczego? Osobiście nie znam nikogo, kto używa elementów języka dostępnych od ES6/2015 bez transpilacji do ES5. W praktyce więc taki kod, zanim dotrze do przeglądarki, będzie zawierał zwykłą funkcję i wszystko zadziała tak jak... dla zwykłej funkcji :). Warto o tym pamiętać gdyż może się okazać, że za kilka lat nasza aplikacja nadal będzie musiała być transpilowana... aby działać poprawnie. Właśnie przez takie "kwiatki". Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
heh, a wiesz że nie pomyślałem o tym co wypluwa babel :) czlowiek codziennie używa i z czasem rutyna daje o sobie znać... ale zawsze mamy tez node gdzie nie zawsze trzeba robic transpilacje, chyba ze np. robimy ssr react itp. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Akurat teraz (ale jestem niemal pewien, że kiedyś tak nie było) babel robi to poprawnie :) Tzn. podany kod skompiluje się do: Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
A faktycznie, rzadko sprawdzam sobie jak wygląda kod po babelowaniu (ale ze mnie polonista :P) ale faktycznie, daje undefined. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Oj, to na pewno — niezłe wyzwanie! Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Świetny artykuł! Aczkolwiek muszę go przeczytać jeszcze ze 4 razy żeby odczarować this :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Kwestia doświadczenia! Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Ale planujemy więcej podobnych artykułów, w których bierzemy jakiś „prosty” temat i wchodzimy w niego wgłąb tak bardzo, że jednak okazuje się, że nie jest taki prosty :D Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Pytanie do tego kawałka: const m2 = m.bind(o2, 3, 4); rozumiem że, tworzymy nową funkcję m2, w której za pomocą metody .bind rozszerzamy m o dwa kolejne argumenty (3, 4). A czym jest o2 ?? bo nie rozumiem dlaczego piszesz, że ten kod zadziała inaczej niż bym tego chciała. Dalej wywołujesz m2 z dwoma argumentami: m2(5, 6); // this === x, [1,2,3,4,5,6] czyli wszystko pasuje..., gdyby tylko zamiast o2 było x w poprzedniej linii? Nie wiem czy jasno opisałam swoją wątpliwość. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Pierwszy argument do Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Dobry artykuł, ale pisany przez doświadczonego programistę dla doświadczonego programisty, czyli nie dla mnie :/ Poszukam kolejnej strony o 'this'. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
A masz jakieś pytania? :) Śmiało pytaj! Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Bardzo pomocny art, dziękuje! Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
this w JS — czyli kilka słów o kontekście wywołania funkcji
Czy kiedykolwiek spotkałaś(-eś) się z błędem w aplikacji, który wynikał z tego, że "this" było ustawione na coś innego, niż się spodziewałaś/eś? Jeśli tak, to nie jesteś jedyna(-y). W swojej karierze programisty miałem okazję występować w roli rekrutera na ponad 160-ciu rozmowach kwalifikacyjnych na stanowiska front-endowe. Jeśli nauczyło mnie to…
https://typeofweb.com/this-js-kontekst-wywolania-funkcji
Beta Was this translation helpful? Give feedback.
All reactions