Przejdź do głównej zawartości

Bug #019

🪲 Znajdź buga​

const Car = {
  color: "red",
  drive() {
    console.log(this)
  },
}

Car.drive()

const driveMyCar = Car.drive

driveMyCar()

Co zostanie zalogowane do konsoli jako efekt wywołania Car.drive() oraz driveMyCar()?

🧪 Rozwiązanie​

const Car = {
  color: "red",
  drive() {
    console.log(this)
  },
}

Car.drive()

const driveMyCar = Car.drive.bind(Car)

driveMyCar()

W przykładzie z błędem, Car.drive() zaloguje do konsoli obiekt Car, natomiast driveMyCar() zaloguje globalny obiekt lub undefined w zależności od tego, czy aktywny będzie tryb ścisły (strict mode).

Przypisując do stałej driveMyCar metodę Car.drive, przypisujemy ją w globalnym kontekście.

Wywołanie this będzie więc odnosiło się do globalnego obiektu (Window w przeglądarkach, global w Node.js), lub zwróci undefined jeśli będziemy w trybie ścisłym.

Jeśli chcemy to naprawić, musimy wyraźnie powiązać przypisywaną metodę drive z innym kontekstem, w którym chcemy aby została wykonana. Takie powiązanie uzyskamy korzystając z metody bind().

W naszym przypadku chcemy powiązać tą metodę z obiektem Car.

🎢 Plac zabaw​

Otwórz edytor w nowym oknie

📑 Linki​

❤️ Podobają Ci się bugi JS?​

Podziel się linkiem ze znajomymi:
https://codisity.pl/100-bugow-js