JavaScriptObiekty i klasy

this

Słowo kluczowe wskazujące obiekt, w kontekście którego wywołano funkcję.

Na tej stronie

Przykład

#
JavaScript
const course = {
  title: 'Kurs JavaScript',
  describe() {
    return `To jest ${this.title}`
  }
}

console.log(course.describe())

const describe = course.describe
try {
  describe()
} catch (error) {
  console.log(error.name)
}
Konsola
To jest Kurs JavaScript
TypeError

Definicja i zastosowanie

#

Wartość this zależy od tego, jak funkcja została wywołana, a nie gdzie ją zdefiniowano. W metodzie wywołanej jako obiekt.metoda() słowo this wskazuje na obiekt. W zwykłym wywołaniu funkcji w trybie ścisłym this to undefined.

Funkcje strzałkowe nie mają własnego this. Przejmują je z miejsca, w którym zostały zapisane. Dlatego świetnie sprawdzają się w funkcjach zwrotnych wewnątrz metod, ale nie nadają się na same metody obiektu.

Najczęstszy błąd to „zgubienie” this przy przekazaniu metody dalej, na przykład jako obsługi zdarzenia. Pomaga funkcja strzałkowa albo metoda.bind(obiekt).

Składnia

#
Składnia
this

Więcej przykładów

#
Funkcja strzałkowa przejmuje this z otoczenia
JavaScript
const timer = {
  seconds: 3,
  start() {
    const ticks = [1, 2, 3].map(() => this.seconds)
    console.log(ticks)
  }
}

timer.start()
Konsola
[3, 3, 3]
Przypięcie this przez bind()
JavaScript
const user = { name: 'Ania', hello() { return 'Cześć, ' + this.name } }
const hello = user.hello.bind(user)

console.log(hello())
Konsola
Cześć, Ania

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Metody obiektów zapisuj zwykłą składnią metoda() {}, a funkcje zwrotne wewnątrz nich jako strzałkowe.
  • Przekazując metodę jako obsługę zdarzenia, użyj () => obj.metoda() albo obj.metoda.bind(obj).

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.