Javascript добавить метод объекту

Методы и this в JS

В предыдущей статье мы уже говорили про методы. Так называются функции, которые хранятся внутри объекта.

Например, здесь у объекта person два ключа. Ключу name соответствует строковое значение. Ключу greet соответсвует функция, которая выводит в консоль слово «Привет» — это метод объекта person .

Доступ к методам объекта

Синтаксис

Вызов метода осуществляется через точку — как и вызов свойств. Только в случае метода понадобится еще указать в конце круглые скобки () .

const person = < name: 'Андрей', greet: function() < console.log('Привет'); >>; // доступ к свойству person.name; // Вывод: Андрей // доступ к методу person.greet(); // Вывод: Привет

Если вызвать метод без скобок — JavaScript сообщит описание функции.

Встроенные методы

В JavaScript много встроенных методов.

Например, встроенный метод объекта Number — parseInt. Он преобразовывает числа, записанные в string, в integer.

let number = '23.32'; let result = parseInt(number); console.log(result); // Вывод: 23

Как добавить метод в объект

Часто встроенных методов недостаточно, поэтому приходится создавать свои, кастомные методы. Вот, как добавить метод в объект:

// создаем объект let student = < >; // добавляем в объект свойство name student.name = 'Андрей'; // добавляем в объект метод greet student.greet = function() < console.log('Андрей'); >// вызываем метод student.greet(); // Вывод: Привет

В этом примере мы сначала созадем пустой объект student , затем добавляем ему свойство name и метод greet . Как вы видите, методы добавляются так же, как и свойства.

Ключевое слово this

Чтобы получить доступ к свойству или методу объекта из метода того же объекта, необходимо использовать ключевое слово this.

Синтаксис

const person = < name: 'Андрей', age: 30, // мы получаем доступ к свойству name объекта person // внутри метода greet объекта person greet: function() < console.log('Привет. Меня зовут' + ' ' + this.name); >>; person.greet();

Сначала мы создали объект person со свойством name и методом greet .

Чтобы получить доступ к свойству name внутри метода greet того же объекта person мы использовали ключевое слово this .

Доступ к переменным внутри метода осуществляется как обычно.

const person = < name: 'Андрей', age: 30, greet: function() < let surname = 'Карпов'; console.log('Привет. Меня зовут' + ' ' + this.name + ' ' + surname); >>; person.greet();

Привет. Меня зовут Андрей Карпов

СodeСhick.io — простой и эффективный способ изучения программирования.

2023 © ООО «Алгоритмы и практика»

Источник

Добавление методов в объект — Свойства и методы одного объекта

В предыдущих практических задачах работа с объектами и объекты и функции проводилась работа с объектами, которые содержали в себе только свойства и их значения (числа и строки), то есть с объектами, которые просто хранили информацию .

Но объекты могут быть активны, то есть выполнять какие-либо действия, операции. В объекты можно добавлять функции , которые называются методами .

Добавление метода в объект

Рассмотрим, как добавить метод в объект JavaScript?

Для примера рассмотрим ранее используемый объект «Автомобиль», одно из свойств которого превратим в метод.

/* объект Автомобиль fiat */
var fiat = make: «Fiat»,
model: «500»,
year: 1957,
color: «Medium Blue»,
passengers: 2,
convertible: false,
mileage: 88000,

/* метод drive — функция эмулирующая движения автомобиля */
drive: function() document.write(«Went went!»); /* Поехали, поехали! */
>

document.write(fiat.color + «
«);
fiat.drive(); /* вызываем метод drive */

В объекте fiat для свойства drive была определена функция:
drive: function()

функции, определяемые в объектах, называются методами , то есть drive — это метод объекта fiat;

Далее вызываем метод drive, как функцию, указывая после имени метода круглые скобки .

Добавляем еще методы — Переменная не определена

Продолжим работать с объектом «Автомобиль», к которому добавим еще методы и усовершенствуем метод drive.

Забегая вперед, стоит сказать, что далее мы столкнемся с ситуацией, когда попытка использовать свойство объекта внутри его метода , приведет к тому, что это свойство будет восприниматься как неопределенная переменная .

/* объект Автомобиль fiat */
var fiat = make: «Fiat»,
model: «500»,
year: 1957,
color: «Medium Blue»,
passengers: 2,
convertible: false,
mileage: 88000,

started: false , /* Свойство started — Двигатель заглушен */

/* Метод запуска двигателя */
start: function() started = true ;
>,

/* Метод остановки двигателя */
stop: function() started = false ;
>,

/* Метод движения или остановки автомобиля */
drive: function() if(started) document.write(» The motor started. Went, went.
«)
>
else document.write(» The car STOPped . «);
>
>
>

document.write(fiat.color + «
«);
fiat.drive();

Переменная started (свойство объекта) внутри метода не определена

ReferenceError: started is not defined

Здесь для объекта fiat добавлено свойство started, которое принимает значение false . Условно это означает, что изначально автомобиль не заведен.

Далее создан метод запуска двигателя start, где started принимает значение true . И метод остановки двигателя stop, где started принимает значение false .

Методом drive объекта является усовершенствованным. Для него составлено условие, согласно которому: если мотор запущен, то есть если started = true , то мы увидим на экране: The motor started. Went, went. (Мотор запущен. Поехали, поехали. ).

Иначе, если started = false , то Javascript выдаст: The car STOPped (Машина остановилась. ) .

В результате, в окне браузера, мы увидим лишь строку Medium Blue — это значение свойства color объекта fiat.

Но почему не сработал метод drive? Ведь изначально свойство started объекта fiat принимает значение false. Следовательно, по логике, обратившись к методу drive, мы должны увидеть The car STOPped .

Если заглянуть в Веб-консоль браузера (в Firefox это путь Инструменты — Веб-разработка — Веб-консоль или комбинация Ctrl+Shift+K) , то мы увидим: ReferenceError: started is not defined . Это значит, что переменная started не определена. Далее разберемся, почему?

Свойства и методы одного объекта — Ключевое слово this

Итак, внутри метода мы имеем неопределенную переменную started. Нужно разобраться: как метод drive видит свойство started ?

1) Для метода drive, как для функции, свойство started — это переменная, которая должна быть где-то определена. Но где?

2) Это не локальная и не глобальная переменная (см. область видимости переменных функции). И это не параметр функции.

3) Дело в том, что started это свойство объекта fiat, а не какая-либо переменная, как ее видит метод (функция) drive.

Нужно как-то сообщить Javascript , что свойство started как и сам метод drive, внутри которого оно используется, относиться к тому же объекту .

Для этого существует ключевое слово this . Об этом уже шла речь в теоретической части.

/* объект Автомобиль fiat */
var fiat = make: «Fiat»,
model: «500»,
year: 1957,
color: «Medium Blue»,
passengers: 2,
convertible: false,
mileage: 88000,

started: false,

start: function() this .started = true;
>,

stop: function() this .started = false;
>,

drive: function() if( this .started) document.write(«The motor started. Went, went.
«)
>
else document.write(«The car STOPped.
«);
>
>
>

document.write(fiat.color + «
«);
fiat.drive(); /* Изначально двигатель заглушен — The car STOPped */
fiat.start(); /* Запуск двигателя */
fiat.drive(); /* The motor started. Went, went. * /
fiat.stop(); /* Остановка двигателя */
fiat.drive(); /* The car STOPped */

Используем ключевое слово this Результат

Medium Blue
The car STOPped.
The motor started. Went, went.
The car STOPped.

Здесь при помощи ключевого слова this было сообщено интерпретатору Javascript о том, что started — является свойством конкретно этого объекта , чтобы интерпретатор не думал, что мы ссылаемся на переменную.

Теперь все в порядке: можно приводить автомобиль в движение после запуска двигателя или после прекращения его работы останавливать машину.

Здесь вы узнали о том, что объекты могут содержать не только свойства, но и функции (методы объекта). А также о том, как работать со свойствами и методами одного объекта в JavaScript при помощи ключевого слова this.

this — указывает на Объект

Следует дать пояснения и разобрать один немаловажный момент , связанный с ключевым словом this .

Если внимательно проанализировать предыдущий пример, где использовалось слово this , то выходит следующее: при вызове метода, this в теле этого метода указывает на объект, метод которого был вызван. Давайте по порядку.

1) Объект fiat содержит метод start, в теле которого используется ключевое слово this.

start: function() this .started = true;
>

2) Далее мы вызываем метод start:

При этом ключевое слово this в теле метода start указывает на объект fiat.

Нужно постараться в это вникнуть и понять. Для общего понимания того, как работает JavaScript .

Источник

Как добавить метод в объект js?

Для добавления метода к объекту, достаточно описать его. Рассмотрим пример.

const person =  firstName: 'Ivan', lastName: 'Petrov', > /* Предположим нам необходим метод, который будет возвращать полное имя пользователя 'Ivan Petrov', реализуем его. */ const person =  firstName: 'Ivan', lastName: 'Petrov', fullName: function()  return `$this.firstName> $this.lastName>` > > console.log(person.fullName()); // -> Ivan Petrov 

Как правило, методу объекта обычно требуется доступ к информации, хранящейся в объекте, для выполнения своей работы. Выше в примере мы использовали ключевое слово this для доступа к данным имени и фамилии в объекте person. По сути в методе fullName() this — это наш объект person. Конечно можно было использовать и person.firstName для доступа к данным, но такой вариант считается не надежным. Если скопировать наш person в другую переменную и вызвать метод снова, будет ошибка.

let person =  firstName: 'Ivan', lastName: 'Petrov', fullName: function()  // не используем this return `$person.firstName> $person.lastName>` > >; // копируем let employe = person; // удаляем person person = null; console.log(employe.fullName()); // -> Cannot read properties of null (reading 'firstName') 

Источник