7.1 Tworzenie metod obiektu
Metody obiektu w JavaScript są funkcjami, które są związane z obiektami i mogą wykonywać działania na tych obiektach. Metody pozwalają obiektom mieć swoje zachowanie, co czyni je ważną częścią programowania obiektowego. Poniżej przyjrzymy się tworzeniu i używaniu metod obiektów.
Metody obiektu można tworzyć na kilka sposobów. Przyjrzyjmy się głównym z nich.
1. Literał obiektu
Metody można tworzyć bezpośrednio w literałach obiektów, używając funkcji.
W tym przykładzie obiekt person ma metodę greet(), która zwraca ciąg znaków z użyciem właściwości name obiektu:
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Wyświetli: Hello, my name is John
2. Skrócona składnia metod
W ES6 pojawiła się skrócona składnia do tworzenia metod obiektu.
Ta składnia sprawia, że kod jest bardziej zwięzły i czytelny:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Wyświetli: Hello, my name is John
3. Dodawanie metod po stworzeniu obiektu
Metody mogą być dodawane do obiektu po jego stworzeniu.
W tym przykładzie metoda greet() jest dodawana do obiektu person po jego stworzeniu:
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // Wyświetli: Hello, my name is John
4. Użycie funkcji-konstruktora
Funkcja-konstruktor pozwala tworzyć metody dla wszystkich egzemplarzy obiektu.
W tym przykładzie metoda greet() jest tworzona dla każdego egzemplarza obiektu, utworzonego przy pomocy funkcji-konstruktora Person():
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
return `Hello, my name is ${this.name}`;
};
}
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Wyświetli: Hello, my name is John
console.log(jane.greet()); // Wyświetli: Hello, my name is Jane
7.2 Użycie metod obiektu
1. Dostęp do metod przez kropkę
Metody obiektu można wywoływać za pomocą składni kropki:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Wyświetli: Hello, my name is John
2. Dostęp do metod przez nawiasy kwadratowe
Metody obiektu można również wywoływać za pomocą nawiasów kwadratowych:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // Wyświetli: Hello, my name is John
3. Wywołanie metody wewnątrz innej metody
Metody obiektu mogą wywoływać inne metody tego samego obiektu.
W tym przykładzie metody sum() i mul() używają wartości ustawionych przez metodę setValues():
let calculator = {
a: 0,
b: 0,
setValues(a, b) {
this.a = a;
this.b = b;
},
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
}
};
calculator.setValues(2, 3);
console.log(calculator.sum()); // Wyświetli: 5
console.log(calculator.mul()); // Wyświetli: 6
4. Użycie this w metodach
Słowo kluczowe this w metodach obiektu odnosi się do samego obiektu, co pozwala uzyskać dostęp do jego właściwości i innych metod:
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // Wyświetli: Brand: Toyota, Model: Camry
5. Przekazywanie metod jako callbacków
Kiedy metody obiektu są przekazywane jako callbacki, ważne jest uwzględnienie wartości this:
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout( person.greet, 1000 ); // Wyświetli: Hello, my name is undefined
W tym przykładzie wartość this została utracona, kiedy metoda greet() została przekazana jako callback do setTimeout(). W rezultacie this wewnątrz greet() odnosi się do globalnego obiektu window. W przeglądarkach obiekt window ma właściwość name, która domyślnie jest pustym ciągiem "". Dlatego wyświetla się "Hello, my name is". Aby zachować poprawną wartość this, można użyć metody bind(), która łączy funkcję z określonym kontekstem:
setTimeout(person.greet.bind(person), 1000); // Wyświetli: Hello, my first name is John
Lub użyć funkcji strzałkowej:
setTimeout(() => person.greet(), 1000); // Wyświetli: Hello, my first name is John
7.3 Wspólne używanie metod
1. Dziedziczenie metod przez prototypy
Metody można dodawać do prototypów obiektów, aby były dostępne dla wszystkich egzemplarzy:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
return `Hello, my name is ${this.name}`;
};
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Wyświetli: Hello, my name is John
console.log(jane.greet()); // Wyświetli: Hello, my name is Jane
2. Używanie metod z innych obiektów
Metody jednego obiektu mogą być wywoływane dla innego obiektu za pomocą metody call() lub apply():
let person1 = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let person2 = {
name: 'Jane',
age: 25
};
console.log(person1.greet.call(person2)); // Wyświetli: Hello, my name is Jane
GO TO FULL VERSION