Какой из методов можно использовать подряд например object method method
As a good programming practice, we should write individual functions/methods for dealing with individual actions. And, writing only one method/function for all actions is a thing. However, sticking to good practice takes a toll on the readability and comprehensibility of the code, because defining a separate function for each action means that the output of a single function/method is input. This makes code comprehensibility even worse, as the function needs to be nested in reverse order. This is where method chaining comes to the rescue.
Method Chaining is a programming strategy that simplifies and embellishes your code. It is a mechanism of calling a method on another method of the same object.
JavaScript this keyword refers to the current object in which it is called. Thus, when a method returns this, it simply returns an instance of the object in which it is returned. Since the returned value is an instance of an object, it is, therefore, possible to call another method of an object to the returned value, which is its instance. And this makes method chaining possible in JavaScript.
7 полезных методов объектов JavaScript
JavaScript — чрезвычайно популярный язык программирования. Он используется для веб- и мобильной разработки, в создании игр, машинном обучении и даже в некоторых областях искусственного интеллекта.
Как и любой другой язык программирования, JavaScript имеет свои типы данных, которые позволяют работать с данными. Объекты — важный тип данных, который можно использовать в языке.
Кроме того, объекты JavaScript обладают множеством полезных методов, позволяющим извлечь из них важную информацию. Далее расскажем о 7 ключевых методах, которые нужно знать каждому разработчику.
1. Метод Object.values()
Метод Object.values() в JavaScript — позволяет получить все значения, заключенные в объекте.
Нужно только передать имя объекта в качестве аргумента, после чего метод вернет массив, содержащий все значения этого объекта.
Приведем пример кода, чтобы было понятнее:
Как видно из примера кода, достаточно просто передать объект в качестве аргумента, чтобы получить массив, содержащий все значения.
2. Метод Object.entries()
Метод Object.entries() — возвращает многомерный массив, содержащий как ключи, так и значения объекта. Нужно просто передать имя объекта в качестве аргумента для метода.
Вот пример кода:
Примечание: метод Object.entries() возвращает массив только собственных перечисляемых пар свойств со строковыми ключами. Он не возвращает свойства из цепочки прототипов объекта.
3. Метод Object.keys()
Метод Object.keys() возвращает массив, содержащий все ключи внутри объекта и передаваемый в качестве аргумента.
Посмотрите пример кода ниже:
Как видите, метод позволил получить массив ключей объектов. Теперь можно использовать любой метод массива для доступа или итерации по ключам.
Например, поскольку объекты не принимают свойство length , можно применить метод Object.keys() для получения массива ключей, а затем использовать с ним свойство length .
Таким способом можно получить длину объекта или подсчитать ключи внутри объекта.
Вот пример кода:
4. Метод Object.freeze()
Метод Object.freeze() позволяет заморозить объект, передаваемый ему в качестве аргумента. После этого нельзя будет обновить объект или добавить ему новые свойства.
Метод просто предотвращает мутацию данных в объектах. Посмотрите на пример кода ниже:
Несмотря на попытку обновить объект person и добавить ему новые свойства, он не изменился, потому что уже заморожен методом Object.freeze() .
5. Метод Object.seal()
Метод Object.seal() предотвращает добавление новых свойств к объекту. Он похож на Object.freeze() с той лишь разницей, что позволяет обновлять и изменять свойства внутри объекта.
Посмотрите пример кода ниже:
Как видите, удалось обновить свойство isOnline , чтобы оно стало true , а не false . Но после добавления к объекту нового свойства .active ничего не произошло, потому что метод Object.seal() не позволяет добавлять новые свойства.
6. Метод Object.create()
Метод Object.create() — позволяет создать новый объект на основе прототипа уже существующего объекта.
Рассмотрим простой пример кода, чтобы было понятнее:
Итак, метод Object.create() позволил создать новый объект, имеющий прототип объекта userData . Это открывает доступ ко всем свойствам и методам userData в новом объекте, избавляя от повторных шагов.
7. Метод object.is()
Метод Object.is() — определяет, одинаковы ли два значения. Он возвращает true , если оба значения равны. В противном случае возвращается false .
Вот как выглядит синтаксис метода:
Как видите, метод принимает два аргумента (значения для сравнения).
Посмотрите пример кода ниже:
Заключение
Итак, вы познакомились с полезными методами объектов, необходимых для продуктивной работы в JavaScript. Эти методы значительно облегчают работу с объектами.
Методы объекта, "this"
Объекты обычно создаются, чтобы представлять сущности реального мира, будь то пользователи, заказы и так далее:
И так же, как и в реальном мире, пользователь может совершать действия: выбирать что-то из корзины покупок, авторизовываться, выходить из системы, оплачивать и т.п.
Такие действия в JavaScript представлены функциями в свойствах.
Примеры методов
Для начала давайте научим нашего пользователя user здороваться:
Здесь мы просто использовали Function Expression (функциональное выражение), чтобы создать функцию приветствия, и присвоили её свойству user.sayHi нашего объекта.
Затем мы можем вызвать ee как user.sayHi() . Теперь пользователь может говорить!
Функцию, которая является свойством объекта, называют методом этого объекта.
Итак, мы получили метод sayHi объекта user .
Конечно, мы могли бы использовать заранее объявленную функцию в качестве метода, вот так:
Когда мы пишем наш код, используя объекты для представления сущностей реального мира, – это называется объектно-ориентированным программированием или сокращённо: «ООП».
ООП является большой предметной областью и интересной наукой самой по себе. Как выбрать правильные сущности? Как организовать взаимодействие между ними? Это – создание архитектуры, и на эту тему есть отличные книги, такие как «Приёмы объектно-ориентированного проектирования. Паттерны проектирования» авторов Эрих Гамма, Ричард Хелм, Ральф Джонсон, Джон Влиссидес или «Объектно-ориентированный анализ и проектирование с примерами приложений» Гради Буча, а также ещё множество других книг.
Сокращённая запись метода
Существует более короткий синтаксис для методов в литерале объекта:
Как было показано, мы можем пропустить ключевое слово "function" и просто написать sayHi() .
Нужно отметить, что эти две записи не полностью эквивалентны. Есть тонкие различия, связанные с наследованием объектов (что будет рассмотрено позже), но на данном этапе изучения это неважно. Почти во всех случаях сокращённый синтаксис предпочтителен.
Ключевое слово «this» в методах
Как правило, методу объекта обычно требуется доступ к информации, хранящейся в объекте, для выполнения своей работы.
Например, коду внутри user.sayHi() может потребоваться имя пользователя, которое хранится в объекте user .
Для доступа к информации внутри объекта метод может использовать ключевое слово this .
Значение this – это объект «перед точкой», который используется для вызова метода.
Здесь во время выполнения кода user.sayHi() значением this будет являться user (ссылка на объект user ).
Технически также возможно получить доступ к объекту без ключевого слова this , обратившись к нему через внешнюю переменную (в которой хранится ссылка на этот объект):
…Но такой код ненадёжен. Если мы решим скопировать ссылку на объект user в другую переменную, например, admin = user , и перезапишем переменную user чем-то другим, тогда будет осуществлён доступ к неправильному объекту при вызове метода из admin .
Это показано ниже:
Если бы мы использовали this.name вместо user.name внутри alert , тогда этот код бы сработал.
«this» не является фиксированным
В JavaScript ключевое слово «this» ведёт себя иначе, чем в большинстве других языков программирования. Его можно использовать в любой функции, даже если это не метод объекта.
В следующем примере нет синтаксической ошибки:
Значение this вычисляется во время выполнения кода, в зависимости от контекста.
Например, здесь одна и та же функция назначена двум разным объектам и имеет различное значение «this» в вызовах:
Правило простое: если вызывается obj.f() , то во время вызова f , this – это obj . Так что, в приведённом выше примере это либо user , либо admin .
Мы даже можем вызвать функцию вообще без объекта:
В строгом режиме ( "use strict" ) в таком коде значением this будет являться undefined . Если мы попытаемся получить доступ к this.name – это вызовет ошибку.
В нестрогом режиме значением this в таком случае будет глобальный объект ( window в браузерe, мы вернёмся к этому позже в главе Глобальный объект). Это – исторически сложившееся поведение this , которое исправляется использованием строгого режима ( "use strict" ).
Обычно подобный вызов является ошибкой программирования. Если внутри функции используется this , тогда она ожидает, что будет вызвана в контексте какого-либо объекта.
Если вы до этого изучали другие языки программирования, то вы, вероятно, привыкли к идее «фиксированного this » – когда методы, определённые в объекте, всегда имеют this , ссылающееся на этот объект.
В JavaScript this является «свободным», его значение вычисляется в момент вызова метода и не зависит от того, где этот метод был объявлен, а скорее от того, какой объект вызывает метод (какой объект стоит «перед точкой»).
Эта концепция вычисления this в момент исполнения имеет как свои плюсы, так и минусы. С одной стороны, функция может быть повторно использована в качестве метода у различных объектов (что повышает гибкость). С другой стороны, большая гибкость увеличивает вероятность ошибок.
Здесь наша позиция заключается не в том, чтобы судить, является ли это архитектурное решение в языке хорошим или плохим. Скоро мы поймем, как с этим работать, как получить выгоду и избежать проблем.
У стрелочных функций нет «this»
Стрелочные функции особенные: у них нет своего «собственного» this . Если мы ссылаемся на this внутри такой функции, то оно берётся из внешней «нормальной» функции.
Например, здесь arrow() использует значение this из внешнего метода user.sayHi() :
Это особенность стрелочных функций. Она полезна, когда мы на самом деле не хотим иметь отдельное this , а скорее хотим взять его из внешнего контекста. Позже в главе Повторяем стрелочные функции мы увидим больше примеров на эту тему.
Итого
- Функции, которые находятся в свойствах объекта, называются «методами».
- Методы позволяют объектам «действовать»: object.doSomething() .
- Методы могут ссылаться на объект через this .
Значение this определяется во время исполнения кода.
- При объявлении любой функции в ней можно использовать this , но этот this не имеет значения до тех пор, пока функция не будет вызвана.
- Функция может быть скопирована между объектами (из одного объекта в другой).
- Когда функция вызывается синтаксисом «метода» – object.method() , значением this во время вызова является object .
Также ещё раз заметим, что стрелочные функции являются особенными – у них нет this . Когда внутри стрелочной функции обращаются к this , то его значение берётся извне.
Задачи
Использование "this" в литерале объекта
Здесь функция makeUser возвращает объект.
Каким будет результат при обращении к свойству объекта ref ? Почему?
Ответ: ошибка.
Это потому, что правила, которые определяют значение this , никак не смотрят на объявление объекта. Важен лишь момент вызова.
Здесь значение this внутри makeUser() равно undefined , потому что оно вызывается как функция, а не через «точечный» синтаксис как метод.
Значение this одно для всей функции, блоки кода и объектные литералы на него не влияют.
Таким образом, ref: this фактически принимает текущее this функции makeUser() .
Мы можем переписать функцию и вернуть то же самое this со значением undefined :
What Method Chaining in JavaScript Is, How It Works and How to Use It
Method chaining is popular method that can help you write more concise and readable code. In this tutorial, you will learn what method chaining in JavaScript is and how it works. You will also learn how to use method chaining to improve the quality and readability of your code.
A quick introduction to method chaining in JavaScript
Have you ever worked with some library such as jQuery? Then, you’ve probably seen something like this. There are two or more methods used in cascade, one after another, and on the same line. Nowadays, it is also very common to see this practice in plain JavaScript. You could see this with arrays, strings and promises.
In all these cases, the process is the same. First, you reference the thing you want to work with. Second, you use as many methods as you need. However, instead of using these methods separately, you use them one after another. You basically chain them together. Let’s take a look at some examples to demonstrate this.
Examples of method chaining
Let’s say you want to work with a string. There are two ways to get this done. The first one is without method chaining. This requires using each method on the string separately. You also have to reference the string each and every time. The second option is to use method chaining.
In this case, you use all string methods you want one after another. You can do this either on a single line or multiple. That depends on you. And, you also reference the string only once, at the very beginning. The same result, but different amount of code that you have to write.
The same applies if you have an array and want to use a couple of array methods to work with it. You can also choose between these two approaches. The longer one not using method chaining and the shorter and more succinct using chaining. Just like with the string, the result will be the same. The amount code will be different.
Promises are a very good example because they almost require method chaining in order to work. First, you [create a promise]. Then, you add appropriate handler functions. These handler functions are necessary for you to process the value you get when the promise is resolved. Well, unless you use async function and await keyword.
How method chaining in JavaScript works
You know how method chaining looks like. The more important question is, how it works. The answer is very simple. It works because of this . Yes, we are talking about the notorious this keyword. When it comes to this there is a lot one can learn. To keep this tutorial short, let’s not get too deep and keep it simple instead.
Let’s say you have an object. If you use this inside that object it will refer to that object. If you then create an instance, or copy, of that object, this will refer to that instance or copy. When you work with some string or array method you are working with an object.
In case of a string you are working with a primitive data type. However, the method you are using, such as toLowerCase() , exists on the prototype of a String object. Having a new method on some object is not enough to make chaining work. There is one critical ingredient, the this .
For chaining to work, a method must return the object it works with. It has to return the this . Think about this as a baton. There are some runners on the field in different positions. However, they can’t all run at once. Only one can run at the time. When currently running runner completes his part, he has to pass the baton to the next runner.
Only when this happens, when the next runner receives the baton, can he run his part. In our case, each method is a runner. The baton is returned this , the object the method is working with. If there is not baton, no this returned, next runner can’t run and chaining will not work.
How to implement method chaining in JavaScript
That was about the theory. Now, to practice. So, in order to make chaining work you need three things. First, you need some object. Second, that object needs some methods you can later call. Third, these methods have to return the object itself. They have to return the this if you want to make them chainable.
Let’s create a simple object as a metaphor for a person. This person will have few properties: name , age and state . The state will specify in what state the person currently is. To change this state, there will be few methods: walk() , sleep() , eat() , drink() , work() and exercise() .
Since we want all these method to be chainable they all have to return this in the very end. There will be also one utility method. This method will log the current state to console. When you use one of the methods to change person’s state, it will also call this method will so you can see the new state in console.
Methods, chaining, this and arrow functions
The necessity to work with this also means one thing. You can’t create chainable methods with arrow functions. The reason is that, in arrow functions, this is not bound to the instance of object. this will refer to the global object window . If you try to return this it will return window , not the object itself.
Another issue would be accessing and changing object properties from the inside of the arrow function. Since this would be global object window you could not use it to reference the object and then its property. You would be trying to reference window and its property.
There is a way to bypass this, if you insist on using arrow functions. Instead of using this to reference the object you would have to reference the object by its name directly. You would have to replace all occurrences of this inside arrow functions with the object name.
One potential downside of this is that you would also loose all flexibility. If you copy the object, all arrow functions will still be hard-wired to the original object. This will happen if you create the copy with both, Object.assign() and Object.create().
However, the problem above will not happen if you use Object() constructor. If you use the Object() constructor, with new keyword, you will create that new object as an independent copy. When you use some method on that copy it will have effect only on that copy, not the original.
So, if you insist on using arrow functions, and want to copy objects? It will be better to create those copies with Object() constructor and new keyword. Otherwise, spare yourself the hustle and just use regular functions.
Method chaining and classes
Are a fan of JavaScript classes? Then, I have some good news for you. You can use method chaining in JavaScript also if you prefer to work with classes. The process is the same as with object, only the syntax is a bit different. The important thing is that every method that should be chainable must return this .
Conclusion: What method chaining in JavaScript is, how it works and how to use it
Method chaining is one simple method that can be quite useful. It can help you write code that is shorter and more readable. I hope that this tutorial helped you understand what method chaining in JavaScript is and how it works. Now, it is up to you to use what you’ve learned about method chaining in your code.
If you liked this article, please subscribe so you don’t miss any future post.
If you’d like to support me and this blog, you can become a patron, or you can buy me a coffee ��
