Загрузка...

Методы объекта

Имя и цена кружки уже лежат вместе. Странице не хватает маленькой работы, которая принадлежит самой кружке: собрать подпись, увеличить счёт корзины, поздороваться с покупателем. Функция сидит на объекте. Это и есть метод.

После ключей и списков

Урок про свойства добавлял поле, снимал другое, спрашивал через in, заходил во вложенный объект и получал имена через Object.keys. Функция там не запускалась. Здесь значение свойства — сама функция, и её запускают с объекта, который её держит.

Пять ходов с методом

📊 Сохранить, вызвать, краткая запись, this, аргумент

Ход Синтаксис Что получается
сохранить greet: function () { return "Hi"; } функция, сидящая на объекте
вызвать product.greet() функция выполняется, вы получаете результат
краткая запись label() { return this.name; } та же разновидность функции, короче
this this.name внутри метода объект, который стоял перед точкой
аргумент cart.add(3) дополнительный вход только для этого вызова

Сначала назовите ход, потом пишите строку. Сохранение функцию не запускает. Краткая запись — не новый тип значения. this — не глобальное имя товара, которое вы надеетесь найти. Аргумент — вход этого вызова, а не второй объект.

Положить функцию на объект

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);

Значением может быть функция

name хранит строку. greet хранит функцию. typeof product.greet даёт "function". Пока ничего не выполнялось, Hi не видно. Имя кружки остаётся рядом с функцией.

Вызвать метод со скобками

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());

Скобки — кнопка запуска

product.greet() входит в функцию. Консоль печатает Hi. Уберите скобки — перед вами сама функция, а не то, что она возвращает. Точка говорит, какому объекту принадлежит вызов.

Краткая запись метода в литерале

javascript 
let product = {
name: "Mug",
label() {
return this.name;
}
};
console.log(product.label());

Краткая запись — только более плотное письмо

В фигурных скобках label() { ... } кладёт функцию на ключ label. Это та же разновидность свойства, что и greet: function () { ... }, только печатать меньше. product.label() её запускает. Тело читает this.name, консоль показывает Mug.

Читать соседние поля через this

javascript 
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());

При простом вызове this — объект перед точкой

product.tag() значит: выполни tag, и пусть this будет product. Тогда this.name и this.price — поля этой кружки. Консоль печатает Mug — 8. Голое name внутри метода — другой поиск, не свойство. Когда вызов больше не имеет вида object.method(), this может указывать в другое место — это следующий урок. Здесь остаётся простой вызов.

Передать аргумент в метод

javascript 
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));

Метод берёт вход для этого вызова

add ждёт extra. cart.add(3) передаёт 3, прибавляет его к count и возвращает новую сумму. Консоль печатает 5. Корзина хранит обновлённый count. Аргумент живёт на время вызова; свойством он станет, только если вы сами его сохраните.

Берите ход, который подходит к задаче

Функция должна жить на объекте? Сохраните её, длинной формой или краткой. Нужен результат? Вызывайте через (). Нужны собственные поля объекта? Читайте их через this. Число нужно только на этот запуск? Передайте аргумент. Object.keys перечислял имена на прошлой странице. Следующая остаётся с this, когда форма вызова меняется.

Поставьте подпись метода на страницу

Дайте товару name, price и tag. Запишите product.tag() в абзац.

Демо страницы — подпись метода

html 
<!DOCTYPE html>
<html>
<head>
<title>object-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
let box = document.getElementById("line");
box.textContent = product.tag();
</script>
</body>
</html>

Абзац показывает Mug — 8. tag собрал эту строку из собственных полей товара. Поменяйте только name или price, обновите страницу и прочитайте новую строку. Следующий урок: ключевое слово this — куда указывает this, когда вызов уже не простой object.method().

Шаги практики

  1. Положите функцию на greet и выведите typeof этого свойства.
  2. Вызовите product.greet() и прочитайте Hi.
  3. Напишите label краткой записью и выведите product.label().
  4. Соберите tag, чтобы this.name и this.price стали одной строкой.
  5. Начните count с 2, вызовите add(3) и прочитайте 5.
  6. В HTML-демо поменяйте только name или price, обновите страницу, прочитайте абзац.

Частые срывы

  • Печатать product.greet без () и ждать Hi
  • Принять краткую запись label() {} за строковое свойство
  • Писать голое name внутри метода вместо this.name
  • Ждать, что cart.add(3) оставит count равным 2
  • Идти к Object.keys, когда имелся в виду вызов метода
  • Ставить стрелочную функцию методом этой страницы — следующий урок следит за this, когда форма вызова меняется

Кратко

  • Метод — это функция, сохранённая как свойство
  • object.method() запускает её и отдаёт возвращённое значение
  • Краткая запись name() {} сохраняет функцию того же рода
  • При простом вызове this — объект перед точкой
  • Параметр принимает аргумент этого вызова
  • Строка метода может заполнить одну строку на странице
  • Дальше: ключевое слово this, когда вызов — не object.method()

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 35 из 37
Javascript Урок