Как добавить метод в объект js
Перейти к содержимому

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

  • автор:

Как добавить в объект новый метод и значение

ошибка чтения массива

Имеется объект в котором есть данные, при добавлении новых методов и значений, мне выдает ошибку, что скрипту не удается считать новый параметр. Добавление с условием того, что название нового метода и значения передается мне переменной. Фото ошибки: Код:

var foo = < "gd": < "name": "raeeeennn", "list": < "ivan":< "name":"nameeeeeeee", "date1":"27.08.1856", "date2":"28.05.1916", "live":"xxx", "description":< "default":"aaaaaaaaaaaaaaa", "other":"bbbbbbbbbbbbbbbbbb" >> > > >; document.write(foo.gd.list.ivan.description.default+'
'); var name = 'aaa'; var raen = 'gd'; foo[gd].list[name].description.default = 'aaaaaaaaaaa'; document.write(foo.gd.list.ivan.description.default+'
');

Отслеживать
задан 25 фев 2016 в 19:15
Vladyslav Siroshtan Vladyslav Siroshtan
733 4 4 серебряных знака 26 26 бронзовых знаков

ошибка в предпоследней строке, правильно foo[‘gd’].list[‘ivan’].description.default — не name , а ivan .

25 фев 2016 в 19:19
var name = ‘ivan’; foo[raen].li.
– user176262
25 фев 2016 в 19:25

@Jean-Claude, я не хочу заменять те параметры, в «ivan», которые у меня есть, я хочу рядом возле «ivan» положить еще один объект с именем которое будет передаваться переменной «name», что бы в «list» были и «ivan» и «то что переменной передал», сейчас передается «aaa»

25 фев 2016 в 19:26
@igor, я выше отписал, что хочу не заменить в «ivan», а добавить новый
25 фев 2016 в 19:28

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

У вас нельзя добавить default , пока не создана структура выше — description, и имя нового человека, делаю так, копирую структуру первого человека (Ивана) новому Антону, а затем внутрь Антона новое дефолтное значение default .

Замечание — доступ к элементам объекта черех квадратные скобки — только через кавычки — foo.gd.list[‘ivan’] или переменную name = ‘ivan’; foo.gd.list[name] .

var foo = < "gd": < "name": "raeeeennn", "list": < "ivan": < "name": "nameeeeeeee", "date1": "27.08.1856", "date2": "28.05.1916", "live": "xxx", "description": < "default": "aaaaaaaaaaaaaaa", "other": "bbbbbbbbbbbbbbbbbb" >> > > >; document.write(foo.gd.list.ivan.description.default+'
'); var name = 'anton'; foo.gd.list[name] = foo.gd.list.ivan; foo.gd.list[name].description.default = "newText"; document.write(foo.gd.list[name].description.default);

Получится в итоге вот что:

var foo = < "gd": < "name": "raeeeennn", "list": < "ivan": < "name": "nameeeeeeee", "date1": "27.08.1856", "date2": "28.05.1916", "live": "xxx", "description": < "default": "aaaaaaaaaaaaaaa", "other": "bbbbbbbbbbbbbbbbbb" >, "anton": < "name": "nameeeeeeee", "date1": "27.08.1856", "date2": "28.05.1916", "live": "xxx", "description": < "default": "newText", "other": "bbbbbbbbbbbbbbbbbb" >> > > > >; 

Методы объекта, «this»

Объекты обычно создаются, чтобы представлять сущности реального мира, будь то пользователи, заказы и так далее:

// Объект пользователя let user = < name: "John", age: 30 >;

И так же, как и в реальном мире, пользователь может совершать действия: выбирать что-то из корзины покупок, авторизовываться, выходить из системы, оплачивать и т.п.

Такие действия в JavaScript представлены функциями в свойствах.

Примеры методов

Для начала давайте научим нашего пользователя user здороваться:

let user = < name: "John", age: 30 >; user.sayHi = function() < alert("Привет!"); >; user.sayHi(); // Привет!

Здесь мы просто использовали Function Expression (функциональное выражение), чтобы создать функцию приветствия, и присвоили её свойству user.sayHi нашего объекта.

Затем мы можем вызвать ee как user.sayHi() . Теперь пользователь может говорить!

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

Итак, мы получили метод sayHi объекта user .

Конечно, мы могли бы использовать заранее объявленную функцию в качестве метода, вот так:

let user = < // . >; // сначала, объявляем function sayHi() < alert("Привет!"); >// затем добавляем в качестве метода user.sayHi = sayHi; user.sayHi(); // Привет!

Объектно-ориентированное программирование

Когда мы пишем наш код, используя объекты для представления сущностей реального мира, – это называется объектно-ориентированным программированием или сокращённо: «ООП».

ООП является большой предметной областью и интересной наукой самой по себе. Как выбрать правильные сущности? Как организовать взаимодействие между ними? Это – создание архитектуры, и на эту тему есть отличные книги, такие как «Приёмы объектно-ориентированного проектирования. Паттерны проектирования» авторов Эрих Гамма, Ричард Хелм, Ральф Джонсон, Джон Влиссидес или «Объектно-ориентированный анализ и проектирование с примерами приложений» Гради Буча, а также ещё множество других книг.

Сокращённая запись метода

Существует более короткий синтаксис для методов в литерале объекта:

// эти объекты делают одно и то же user = < sayHi: function() < alert("Привет"); >>; // сокращённая запись выглядит лучше, не так ли? user = < sayHi() < // то же самое, что и "sayHi: function()" alert("Привет"); > >;

Как было показано, мы можем пропустить ключевое слово «function» и просто написать sayHi() .

Нужно отметить, что эти две записи не полностью эквивалентны. Есть тонкие различия, связанные с наследованием объектов (что будет рассмотрено позже), но на данном этапе изучения это неважно. Почти во всех случаях сокращённый синтаксис предпочтителен.

Ключевое слово «this» в методах

Как правило, методу объекта обычно требуется доступ к информации, хранящейся в объекте, для выполнения своей работы.

Например, коду внутри user.sayHi() может потребоваться имя пользователя, которое хранится в объекте user .

Для доступа к информации внутри объекта метод может использовать ключевое слово this .

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

let user = < name: "John", age: 30, sayHi() < // "this" - это "текущий объект". alert(this.name); >>; user.sayHi(); // John

Здесь во время выполнения кода user.sayHi() значением this будет являться user (ссылка на объект user ).

Технически также возможно получить доступ к объекту без ключевого слова this , обратившись к нему через внешнюю переменную (в которой хранится ссылка на этот объект):

let user = < name: "John", age: 30, sayHi() < alert(user.name); // "user" вместо "this" >>;

…Но такой код ненадёжен. Если мы решим скопировать ссылку на объект user в другую переменную, например, admin = user , и перезапишем переменную user чем-то другим, тогда будет осуществлён доступ к неправильному объекту при вызове метода из admin .

Это показано ниже:

let user = < name: "John", age: 30, sayHi() < alert( user.name ); // приведёт к ошибке >>; let admin = user; user = null; // перезапишем переменную для наглядности, теперь она не хранит ссылку на объект. admin.sayHi(); // TypeError: Cannot read property 'name' of null

Если бы мы использовали this.name вместо user.name внутри alert , тогда этот код бы сработал.

«this» не является фиксированным

В JavaScript ключевое слово «this» ведёт себя иначе, чем в большинстве других языков программирования. Его можно использовать в любой функции, даже если это не метод объекта.

В следующем примере нет синтаксической ошибки:

function sayHi()

Значение this вычисляется во время выполнения кода, в зависимости от контекста.

Например, здесь одна и та же функция назначена двум разным объектам и имеет различное значение «this» в вызовах:

let user = < name: "John" >; let admin = < name: "Admin" >; function sayHi() < alert( this.name ); >// используем одну и ту же функцию в двух объектах user.f = sayHi; admin.f = sayHi; // эти вызовы имеют разное значение this // "this" внутри функции - это объект "перед точкой" user.f(); // John (this == user) admin.f(); // Admin (this == admin) admin['f'](); // Admin (нет разницы между использованием точки или квадратных скобок для доступа к объекту)

Правило простое: если вызывается obj.f() , то во время вызова f , this – это obj . Так что, в приведённом выше примере это либо user , либо admin .

Вызов без объекта: this == undefined

Мы даже можем вызвать функцию вообще без объекта:

function sayHi() < alert(this); >sayHi(); // undefined

В строгом режиме ( «use strict» ) в таком коде значением this будет являться undefined . Если мы попытаемся получить доступ к this.name – это вызовет ошибку.

В нестрогом режиме значением this в таком случае будет глобальный объект ( window в браузерe, мы вернёмся к этому позже в главе Глобальный объект). Это – исторически сложившееся поведение this , которое исправляется использованием строгого режима ( «use strict» ).

Обычно подобный вызов является ошибкой программирования. Если внутри функции используется this , тогда она ожидает, что будет вызвана в контексте какого-либо объекта.

Последствия свободного this

Если вы до этого изучали другие языки программирования, то вы, вероятно, привыкли к идее «фиксированного this » – когда методы, определённые в объекте, всегда имеют this , ссылающееся на этот объект.

В JavaScript this является «свободным», его значение вычисляется в момент вызова метода и не зависит от того, где этот метод был объявлен, а скорее от того, какой объект вызывает метод (какой объект стоит «перед точкой»).

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

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

У стрелочных функций нет «this»

Стрелочные функции особенные: у них нет своего «собственного» this . Если мы ссылаемся на this внутри такой функции, то оно берётся из внешней «нормальной» функции.

Например, здесь arrow() использует значение this из внешнего метода user.sayHi() :

let user = < firstName: "Ilya", sayHi() < let arrow = () =>alert(this.firstName); arrow(); > >; user.sayHi(); // Ilya

Это особенность стрелочных функций. Она полезна, когда мы на самом деле не хотим иметь отдельное this , а скорее хотим взять его из внешнего контекста. Позже в главе Повторяем стрелочные функции мы увидим больше примеров на эту тему.

Итого

  • Функции, которые находятся в свойствах объекта, называются «методами».
  • Методы позволяют объектам «действовать»: object.doSomething() .
  • Методы могут ссылаться на объект через this .

Значение this определяется во время исполнения кода.

  • При объявлении любой функции в ней можно использовать this , но этот this не имеет значения до тех пор, пока функция не будет вызвана.
  • Функция может быть скопирована между объектами (из одного объекта в другой).
  • Когда функция вызывается синтаксисом «метода» – object.method() , значением this во время вызова является object .

Также ещё раз заметим, что стрелочные функции являются особенными – у них нет this . Когда внутри стрелочной функции обращаются к this , то его значение берётся извне.

Задачи

Использование «this» в литерале объекта

важность: 5

Здесь функция makeUser возвращает объект.

Каким будет результат при обращении к свойству объекта ref ? Почему?

function makeUser() < return < name: "John", ref: this >; > let user = makeUser(); alert( user.ref.name ); // Каким будет результат?

Ответ: ошибка.

function makeUser() < return < name: "John", ref: this >; > let user = makeUser(); alert( user.ref.name ); // Error: Cannot read property 'name' of undefined

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

Здесь значение this внутри makeUser() равно undefined , потому что оно вызывается как функция, а не через «точечный» синтаксис как метод.

Значение this одно для всей функции, блоки кода и объектные литералы на него не влияют.

Таким образом, ref: this фактически принимает текущее this функции makeUser() .

Мы можем переписать функцию и вернуть то же самое this со значением undefined :

function makeUser() < return this; // на этот раз нет литерала объекта >alert( makeUser().name ); // Error: Cannot read property 'name' of undefined

Как вы можете видеть, результат alert( makeUser().name ) совпадает с результатом alert( user.ref.name ) из предыдущего примера.

Вот противоположный случай:

function makeUser() < return < name: "John", ref() < return this; >>; > let user = makeUser(); alert( user.ref().name ); // John

Теперь это работает, поскольку user.ref() – это метод. И значением this становится объект перед точкой . .

Как создать метод в js?

Метод — это функция, записанная внутри свойства объекта.

Способов создания методов несколько. Давайте рассмотрим некоторые из них.

  • Объявление функции, которая сразу же присваивается свойству объекта и становится методом:
const user =  name: 'John', surname: 'Smith', >; user.sayHello = function()  return `Hello, $this.name> $this.surname>!`; >; // вызываем метод и выводим результат в консоль console.log(user.sayHello()); // => Hello, John Smith! 
  • Объявление функции и затем её присваивание объекту через имя функции:
function getGreeting()  return `Hello, $this.name> $this.surname>!`; >; user.sayHello = getGreeting; console.log(user.sayHello()); // => Hello, John Smith! 
  • Объявление функции сразу внутри объекта при его создании:
const user =  name: 'John', surname: 'Smith', sayHello: function()  return `Hello, $this.name> $this.surname>!`; >, >; console.log(user.sayHello()); // => Hello, John Smith! 
  • Сокращенный вариант предыдущего способа. Чаще всего поступают именно так:
const user =  name: 'John', surname: 'Smith', sayHello()  return `Hello, $this.name> $this.surname>!`; >, >; console.log(user.sayHello()); // => Hello, John Smith! 

Как добавить метод в объект 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') 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *