Итак, вы овладели искусством объявления переменных. Вы можете успешно вывести на консоль строку «hello world». Молодец, что зашел так далеко!
var helloWorld = "hello world" console.log(helloWorld)
К этому моменту вы должны быть знакомы с идеей строки, числа, логического значения и, возможно, даже массива. Все это очень часто используемые «типы данных Javascript».
var myString = "Look at this beautiful string" var myNumber = 7 var myBoolean = true var myArray = [1,2,3]
Если вы чем-то похожи на меня, вы чувствовали себя довольно хорошо до этого момента. Следующим логическим подходом будет барабанная дробь, пожалуйста…. ОБЪЕКТЫ! Объекты — это то место, где все становится немного продвинутым, и многие мои студенты начинают решать, что они больше не хотят быть программистами.
Уверяю вас, бояться нечего! Вот тут-то и начинается веселье! Ведь это должно быть весело, верно? Правильно.
Итак, вы погуглили «Что такое объект Javascript», как и должен делать любой хороший программист. В конце концов, мы мастера в искусстве поиска в Google. Возможно, вы видели что-то подобное.
«JavaScript разработан на основе простой объектно-ориентированной парадигмы. Объект — это набор свойств, а свойство — это связь между именем (или ключом) и значением. Значением свойства может быть функция, и в этом случае свойство называется методом».
Возможно, это не так ясно, как вам хотелось бы, поэтому я решил написать этот простой шаг за шагом для объектов Javascript. Давайте приступим!
Проще говоря, объект в своей самой базовой форме — это часть данных, которая содержит другие части данных и функциональные возможности.
Давайте возьмем реальный пример объекта. Человеческое тело. Человеческое тело имеет фрагменты данных, состоящие из «пар ключ-значение». Когда я говорю это, я имею в виду, что у всех нас есть глаза, но они различаются по цвету. «Ключом» в этом сценарии будут глаза, а «значением» будет цвет ваших глаз. Программно мы могли бы определить наш объект человеческого тела следующим образом.
var humanBodyObject = {
eyes:'blue'
}
Итак, мы объявляем переменную точно так же, как и все другие типы данных, и то, что делает ее объектом, — это фигурные скобки {}. На данный момент наш объект имеет одно свойство: «ключ» — это глаза, а «значение» — синий. Давайте добавим нашему объекту еще несколько свойств, которые мы будем разделять запятыми.
var humanBodyObject = {
eyes: 'blue',
hair:'brown',
name:'Dexter',
birthCity:'Seattle'
}
Пока у нас есть объект с 4 свойствами, разделенными запятыми. На данный момент все эти свойства являются строками. С объектами может быть связано несколько типов данных, что делает их такими динамичными. Давайте добавим к нашему объекту пару других пар ключ-значение, которые не являются просто строками.
var humanBodyObject = {
eyes: 'blue',
hair:'brown',
name:'Dexter',
birthCity:'Seattle',
birthYear:1983,
zipCode:98323,
isAlive:true
}
А, наш объект действительно оживает. Теперь, глядя на этот объект, мы знаем, что у нас есть живой человек по имени Декстер, который родился в Сиэтле в 1983 году, у него каштановые волосы и голубые глаза. Похоже, неплохой чувак.
Итак, как мы можем получить доступ к этой информации, спросите вы? Обозначение точками! Вот что означает запись через точку. Если мы хотим получить доступ к свойству eyes у нашего приятеля Декстера и сохранить его в переменной, это будет выглядеть так.
var dextersEyeColor = humanBodyObject.eyes
Понимаете? Мы ссылаемся на имя объекта, ставим точку и затем говорим, какое свойство нам нужно. Просто так.
Давайте посмотрим, как это можно использовать в реальной ситуации. Кто-то просит вас создать из этого объекта большую строку информации, и она может выглядеть примерно так.
var stringOfInformation = humanBodyObject.name + " was born in " + humanBodyObject.birthCity + " in the year " + humanBodyObject.birthYear + ". They have " + humanBodyObject.eyes + " eyes and " + humanBodyObject.hair + " hair. It is " + humanBodyObject.isAlive + " that they are alive!"
Эта переменная будет вычисляться как строка, которая выглядит так:
«Декстер родился в Сиэтле в 1983 году. У них голубые глаза и каштановые волосы. Это правда, что они живы!»
В этом суть точечной нотации. Вы просто называете объект, на который ссылаетесь, добавляете точку и указываете свойство, которое хотите вернуть.
Вы также можете добавлять массивы к объекту в качестве свойства. Чего ждать? Да, это так.
var humanBodyObject = {
eyes: 'blue',
hair:'brown',
name:'Dexter',
birthCity:'Seattle',
birthYear:1983,
zipCode:98323,
isAlive:true,
favoriteFoods:['pizza','fries','shrimp'],
languagesSpoken:['French','English'],
luckyNumbers[99,7,13,27]
}
О, но подождите, есть еще. Как насчет того, чтобы поместить объект внутрь нашего объекта! Я знаю, я знаю, вы только что научились делать объект, зачем вам ВСЕГДА начинать помещать объекты в объекты? Что ж, давайте посмотрим просто для прикола.
var humanBodyObject = {
eyes: 'blue',
hair:'brown',
name:'Dexter',
birthCity:'Seattle',
birthYear:1983,
zipCode:98323,
isAlive:true,
favoriteFoods:['pizza','fries','shrimp'],
languagesSpoken:['French','English'],
luckyNumbers[99,7,13,27],
address:{
street:'1122 10th Avenue',
city:'Seattle',
state:'WA',
zipCode:98323,
country:'USA'
}
}
А что, если кто-нибудь попросит вас сохранить адрес Декстера в переменной? Ах, точечная запись усиливается.
var dextersStreetAddress = humanBodyObject.address.street
Имеет смысл, не так ли? Хорошо! Теперь это может зайти так далеко, как вы хотите, если вы хотите жить опасно. Кто сказал, что вы не можете иметь объект внутри объекта внутри объекта внутри объекта йада йада йада? Ни один. Никто! Верно! Вложите эти объекты в свое удовольствие.
И последнее, но не менее важное: объекты могут иметь функции, которые в этом случае называются методами. Если вы еще не узнали о функциях, вернитесь к старому Google и сделайте домашнее задание. Возможно, когда-нибудь я напишу еще один учебник по ним, если меня спросит достаточное количество людей.
Если вы знаете, что такое функция, вот как она выглядит на объекте, который снова называется методом.
var humanBodyObject = {
eyes: 'blue',
hair:'brown',
name:'Dexter',
birthCity:'Seattle',
birthYear:1983,
zipCode:98323,
isAlive:true,
favoriteFoods:['pizza','fries','shrimp'],
languagesSpoken:['French','English'],
luckyNumbers[99,7,13,27],
address:{
street:'1122 10th Avenue',
city:'Seattle',
state:'WA',
zipCode:98323,
country:'USA'
},
sayHello:function(){
console.log("hello there!")
}
}
Итак, теперь мы можем сказать, что «метод sayHello» для нашего «humanBodyObject» просто печатает сообщение «Привет!». Как мы выполняем этот метод, спросите вы? Ну конечно же с записью через точку!
humanBodyObject.sayHello()
Эта строка кода просто напечатает «Привет!» на нашу консоль. Опять же, мы просто ссылаемся на объект, с которым работаем, добавляем точку и запускаем эту функцию! Разве ты не любишь точечную запись?
Спасибо за чтение, и я надеюсь, что это помогло!
