← Lekcje
JavaScript · lekcja 15

Obiekty w JavaScript 2/2:
metoda i this

Plan tematu (2 godziny):

  1. Godzina 1: literał obiektu, właściwości, dostęp kropką i nawiasem
  2. Godzina 2 (dziś): metoda - właściwość, która jest funkcją, i słowo this
  3. Punkt zaczepienia: this w JavaScript to ten sam pomysł co $this w PHP (kurs PHP, lekcja 13)
  4. Ćwiczenie: dopisujemy metodę introduceSelf do obiektu student
Rozgrzewka · 3 minuty

Rozgrzewka: obiekty z poprzedniej lekcji

Macie obiekt z poprzedniej lekcji: let student = {firstName: "Anna", lastName: "Kowalska", birthYear: 1985};

  1. Jak odczytacie wartość lastName dostępem kropką?
  2. Jak odczytacie tę samą wartość dostępem nawiasem?
  3. W zapisie firstName: "Anna" - co jest przed dwukropkiem, a co po nim?
Część 1 · Metoda - właściwość, która jest funkcją

Metoda: właściwość z przypiętą funkcją

student firstName:"Anna" lastName:"Kowalska" birthYear:1985 ƒ introduceSelf: function() { ... } metoda 
let student = {
  firstName: "Anna",
  lastName: "Kowalska",
  birthYear: 1985,
  introduceSelf: function() {
    return "Jestem " + this.firstName;
  }
};

Wartością właściwości introduceSelf jest funkcja - dokładnie tak samo, jak wartością firstName jest tekst. Metoda to nic innego niż właściwość, której wartość da się wywołać nawiasami ().

MDN: Learn_web_development/Core/Scripting/Object_basics, sekcja „Object basics” („The last two items are functions that allow the object to do something with that data, and are referred to as the object's methods”)
Część 2 · Słowo this

this: metoda wskazuje z powrotem na swój obiekt

student firstName: "Anna" introduceSelf: function() { return "Jestem " + this.firstName; this wskazuje na obiekt, który wywołał metodę 
student.introduceSelf();  // wewnatrz metody: this === student
console.log(student.introduceSelf());  // Jestem Anna

Wewnątrz metody this zawsze wskazuje na obiekt, który tę metodę wywołał - tu na student. Dlatego this.firstName to to samo, co student.firstName, ale metoda działa dla każdego obiektu, który ją ma, bez wpisywania nazwy obiektu na sztywno.

MDN: Learn_web_development/Core/Scripting/Object_basics, sekcja „What is 'this'?” („The this keyword typically refers to the current object the code is being executed in. In the context of an object method, this refers to the object that the method was called on”)
Część 3 · Punkt zaczepienia z PHP

$this-> w PHP, this. w JavaScript

PHP · class Product public $name = "Keyboard"; function showInfo() { return $this->name; } JavaScript · obiekt product name: "Keyboard", showInfo: function() { return this.name; }

Ten sam pomysł co $this z kursu PHP (klasa Product): wewnątrz metody trzeba jakoś wskazać „mój własny obiekt”. PHP robi to strzałką $this->name, JavaScript zwykłą kropką this.name - bez znaku dolara, bez strzałki.

PHP Manual: „The pseudo-variable $this is available when a method is called from within an object context. $this is the value of the calling object” · php.net/manual/en/language.oop5.basic.php · MDN: Learn_web_development/Core/Scripting/Object_basics, sekcja „What is 'this'?” („this refers to the object that the method was called on”)
Część 4 · Wywołanie metody

metoda() uruchamia, metoda bez nawiasów - nie

student.introduceSelf() "Jestem Anna" wynik działania student.introduceSelf ƒ introduceSelf() {…} sama definicja 
console.log(student.introduceSelf());  // Jestem Anna - funkcja sie wykonala
console.log(student.introduceSelf);    // [Function: introduceSelf] - sama definicja, NIE wywolana
Egzamin E.14

Tak pytają na egzaminie

1.

function Student() {
  this.firstName = '';
  this.lastName = '';
  this.technician = 'informatyk';
  this.profession = function() {
    return this.technician;
  };
}

W programowaniu obiektowym w języku JavaScript użyty w przedstawionym kodzie zapis this.profession oznacza

  1. klasę.
  2. metodę.
  3. konstruktor.
  4. właściwość.

2. W języku JavaScript zdefiniowano obiekt Car. Aby wywołać jedną z metod tego obiektu, należy zapisać

  1. Car.()
  2. Car.color
  3. Car.fuelUsage()
  4. Car.fuelUsagePer100
CKE, E.14, styczeń 2019, zadanie 34 · CKE, E.14, styczeń 2020, zadanie 32
Ćwiczenie przy komputerze · 20 minut

Ćwiczenie: metoda i this

  1. Otwórz script.js z poprzedniej lekcji, z obiektem student (w folderze swojego projektu).
  2. Dopisz do obiektu student metodę:
    introduceSelf: function() { return "Jestem " + this.firstName; }
  3. Wywołaj metodę i wypisz wynik: console.log(student.introduceSelf());
  4. Dla porównania wypisz też samą metodę, bez nawiasów: console.log(student.introduceSelf);
  5. Dla chętnych w domu: zbuduj drugi obiekt z tą samą metodą introduceSelf i wywołaj ją.
Na koniec

Sprawdź się

  1. Czym różni się metoda od zwykłej właściwości obiektu?
  2. Co zwraca this wewnątrz metody wywołanej jako student.introduceSelf()?
  3. Jaka jest różnica między student.introduceSelf() a student.introduceSelf (bez nawiasów)?

To tyle na dziś - temat obiektów zamknięty. Na następnej lekcji: własne funkcje w JavaScript.

Poza szkołą

A jak to wygląda w produkcji?

Na lekcjiW produkcjiStatus
introduceSelf: function() {...}Skrót introduceSelf() {...}, bez słowa functionzastępowane
Zwykła funkcja jako metodaW callbackach częściej strzałkowa () => {} - ale bez własnego thistak robię w projektach
Metoda tylko jako student.introduceSelf()„Wyjęta” z obiektu traci this - naprawia to bind()tak robię w projektach
Jeden obiekt literałem {...}Wiele podobnych obiektów - class Person {...}, jak PHP z kursu PHPnadal w użyciu

Ciekawostka z MDN: skrócony zapis metody z tabeli wyżej (introduceSelf() {...} zamiast introduceSelf: function() {...}) nie jest nowością. Przeglądarki obsługują go od września 2015 roku, więc to dziś standardowy, sprawdzony zapis, nie eksperyment.

MDN: Learn_web_development/Core/Scripting/Object_basics, sekcja „Object basics” („Instead of bio: function () we can write bio()”, „From now on, we'll use this shorter syntax”)