Какие бывают свойства объекта
Наиболее важная часть объекта – его свойства. Объект представляет из себя набор свойств, и каждое свойство состоит из имени и значения, ассоциированного с этим именем. Именем свойства (ключом) может быть только строка, а вот значением – любой тип данных. Если значением свойства является функция, то её можно назвать методом объекта.
Доступ к свойствам
Свойства объектов в JavaScript являются теми же самыми переменными, за тем исключением, что они закреплены за объектом. Как и все переменные JavaScript, имя объекта (которое тоже может быть переменной) и имя свойства чуствительны к регистру. Свойства объекта определяют его индивидуальные характеристики.
Получить значение свойства можно с помощью операторов точки (.) или квадратных скобок ([]). Значение в левой части оператора должно быть ссылкой на объект, обычно это просто имя переменной, содержащей ссылку на объект, но это может быть любое допустимое в JavaScript выражение, являющееся объектом.
Значение в правой части оператора должно быть именем свойства. При использовании оператора точка (.) справа должен находиться простой идентификатор, соответствующий имени свойства. Доступ к любому имени свойства, которое содержит невалидный JavaScript идентификатор (например, имя свойства содержит в себе пробел, тире или начинается с цифры), может быть получен с использованием квадратных скобок ([]).
Значение свойства может быть любым: как значением простого типа, так и другим объектом. Значения можно вкладывать друг в друга, причем вложений можно делать сколько угодно:
Значение объекта может быть обновлено путем присваивания. Если свойство с таким именем уже существует в объекте, его значение заменяется:
Квадратные скобки также позволяют обратиться к свойству, имя которого хранится в переменной:
Если имя свойства хранится в переменной, то единственный способ к нему обратиться – это применение оператора [] (квадратные скобки).
Определение методов
Метод – это свойство объекта, значением которого является функция. Методы определяются так же, как и обычные функции, за тем исключением, что они присваиваются свойству объекта. Вызов метода осуществляется точно также, как и вызов обычной функции – с помощью оператора вызова ():
Методы объектов можно добавлять и удалять в любой момент, точно также как вы поступаете с обычными свойствами объектов:
Для доступа к свойствам объекта внутри метода используется ключевое слово this. Использование this позволяет ссылаться на объект, к которому принадлежит метод:
Здесь вместо this внутри функции (метода) greeting можно было бы обратиться к объекту, используя переменную person (сам объект):
Ключевое слово this
var person = {
name: ‘John’,
greeting: function() {
alert( ‘Hello, ‘ + this.name + ‘!’);
}
// идентичная запись
greeting: function() {
alert( ‘Hello, ‘ + person.name + ‘!’);
}
В предыдущем примере мы определили функцию внутри свойства greeting во время определения объекта person. Однако, мы можем определить сначала функцию, а затем закрепить ее за свойством person.fun. В таком случае поведение this не изменится:
Эти примеры показывают, что на поведение this совсем не влияет то, где была определена функция, а имеет значение только то, что функция была вызвана из свойства объекта.
Через ключевое слово this метод может получить доступ не только к любому свойству объекта, но и передать куда-нибудь ссылку на сам объект:
Известно, что каждый объект содержит ссылку на свой объект-прототип. Если метод находится где-то в цепочке прототипов, то this ссылается на объект, на котором был вызван метод, т.е. как будто этот метод является методом самого объекта, а не прототипа.
В этом примере объект person, не имеет собственного свойства (метода) fullName, а наследует это свойство от своего прототипа prototypeObject. Поскольку поиск свойства начался с person.fullName, то this внутри функции fullName будет ссылаться на объект person. Таким образом, если fullName вызывается как метод объекта person, то и this относится к person. Это очень важная особеность прототипного наследования JavaScript.
Удаление свойств
Оператор delete удаляет свойство из объекта. Он удаляет свойство объекта, если оно есть. Удаление не касается свойств объектов, связанных по цепочке прототипов. Если свойство с таким же именем существует в цепочке прототипов, объект унаследует это свойство из прототипа.
Выражение delete возвращает true, если удаление свойства прошло успешно. delete вернет false только в том случае, когда свойство не было удалено (например, если свойство относится к защищенному объекту, принадлежащему браузеру). true возвращается даже в том случае, если свойство, которое вы пытаетесь удалить, не существует в объекте:
Итоги
- Объект представляет собой набор свойств.
- Получить значение свойства можно с помощью операторов точки (.) или квадратных скобок ([]).
- Свойства можно добавить в объект в любой момент. Для этого следует присвоить значение с указанием имени нового свойства.
- Метод представляет собой свойство, значением которого является функция. Для ссылки на объект, из которого вызывается метод, используется ключевое слово this.
- Методы можно вызывать в точечной записи: имя объекта, точка и имя свойства метода, за которым следует пара круглых скобок.
- Метод можно рассматривать как функцию, присвоенную свойству, поэтому новый метод можно добавить в любой момент.
- Методы могут получать аргументы, как и обычные функции.
- Если несуществующему свойству объекта присваивается значение, данное свойство добавляется в объект. Для удаления свойств используют инструкцию delete.
Задачи
Свойства объекта
Почему данный код выдаёт синтаксическую ошибку?
var cat = {
legs: 4
name: «Гармония»
color: «Черепаховый»
};alert( cat.name ); // SyntaxError
Показать решение
Решение:
Чтобы исправить ошибку, нужно добавить запятую после первого и второго свойства.
Доступ к свойствам объекта
Сохраните значения свойств объекта myObj в переменных x, y и z. Выведите значения переменных x, y и z через alert.
var myObj = {
«an entree»: «hamburger»,
«my side»: «veggies»,
«the drink»: «water»
};// ваш код
Показать решение
Свойство в переменной
- В переменной myDog сохраните имя свойства объекта dogs: «hunter».
- Присвойте свойство с именем myDog и значением «Ротвейлер» объекту dogs.
- Выведите значение свойства, хранящегося в переменной myDog через alert.
var dogs = {
running: «Арабская борзая»,
hunter: «Лабрадор»,
guard: «Московская»
}// ваш код
Показать решение
Решение:
Если имя свойства объекта хранится в переменной (var myDog = «hunter»), то обратиться к нему можно только через квадратные скобки dogs[myDog].
Обновить свойство
Поменяйте значение свойства guard c «Московская» на «Московская-сторожевая»
var dogs = {
running: «Арабская борзая»,
hunter: «Лабрадор»,
guard: «Московская»
}// ваш код
Показать решение
Решение:
Если имя свойства объекта хранится в переменной (var myDog = «hunter»), то обратиться к нему можно только через квадратные скобки dogs[myDog].
Добавление и удаление свойств
Добавьте в объект dogs свойство с именем driving и значением «Сибирский хаски». Удалите свойство «guard» из dogs. Выведите вновь добавленное и удалённое свойства через alert.
var dogs = {
running: «Арабская борзая»,
hunter: «Лабрадор»,
guard: «Московская-сторожевая»
}// ваш код
Показать решение
Добавление метода
- Определите никак не связанную с приведенными объектами dog_1 и dog_2 функцию testBreed, которая будет выводить породу (breed), тип (a type) и вес (the weight) собаки.
- Присвойте функцию testBreed свойству sayAbout для обоих объектов.
- Запустите функцию testBreed для каждого из объектов.
var dog_1 = {
breed: «Алабай»,
«a type»: «собака-компаньон»,
«the weight»: «50 кг»
}var dog_2 = {
breed: «Бультерьер»,
«a type»: «бойцовская»,
«the weight»: «36 кг»
}// ваш код
Показать решение
Тема: «Свойства объекта. Общие и отличительные свойства»
Цели урока:
Обобщить сведения об именах объектов;
Рассмотреть характерные свойства различных объектов;
Сформировать представление о свойствах объекта, его характеристике, общих и отличительных свойствах объектов;
Актуализировать знания и многообразии свойств объектов, их категорий;
Развивать информационную культуру учащихся при работе в графическом редакторе.
Педагогические задачи урока:
Инициировать умственную деятельность учащихся при обобщении сведений об именах объектов;
Развивать умение планомерно анализировать объекты, выделять существенные свойства;
Раскрыть смысл понятия «отличительные свойства» на основе анализа примеров;
Развивать умение передавать свойства объектов средствами графического редактора;
Формировать навыки работы с изображениями в графическом редакторе;
Развивать информационную культуру посредством обучения грамотному расположению объектов на листе.
Требования к уровню усвоения учебного материала после завершения урока:
Знать, что такое характеристика объекта;
Понимать многообразие свойств объекта, свойства бывают общими и отличительными;
Знать основные категории свойств объекта и уметь раскрывать их на примерах;
Уметь выделять в объектах общие и отличительные свойства;
Уметь проводить планомерный анализ свойств объекта с опорой на план-схему;
Уметь обосновывать выбор размера шрифта, цвета, оформления заголовков и заливки графических изображений объектов.
Ключевые понятия: объект, свойства, совокупность свойств, общие свойства, отличительные свойства, характеристика.
Вспомогательные (дополнительные) понятия: признаки, назначение, размер, форма, вкус, материал, состав, действия.
План урока:
Организационный момент (1- 2 мин).
Обобщение сведений, известных учащимся (3- 4 мин).
Новый материал по теме в виде эвристической беседы (6-8 минут).
Выполнение заданий в тетради (7 -8 мин).
Физминутка (2-3 мин).
Компьютерный практикум (10 мин).
Обобщение и подведение итогов.
Домашнее задание (2 -3 мин)
Ход урока:
При изложении материала данной темы учитель должен последовательно раскрыть следующие ключевые идеи:
Все объекты обладают свойствами;
Каждый объект имеет множество свойств.
Повторение проводится в игровой форме. Учащиеся делятся на 4 группы. Им предлагаются темы: «Предметы», «Живые существа», «События», «Явления». Для каждой группы каждая группа должна записать две пары имен (общее и конкретное). Например: «праздник – день рождения», «время суток – утро», «книга – учебник информатики», «животное – собака». По результатам игры поощряется самая успешная группа и самые интересные пары ответов.
Сценарий эвристической беседы:
Нас окружают множество объектов. Они все одинаковы или чем-то отличаются между собой? (разные)
Как мы отличаем один объект от другого? (по внешнему виду, действиям, и другим признакам и свойствам)
Все объекты обладают свойствами. По этим свойствам мы можем судить, чем объекты похожи и чем отличаются. Свои свойства объекты проявляют тогда, когда мы с ними выполняем какие-либо действия или сравниваем объекты друг с другом.
Ключевые вопросы:
Чем различаются эти объекты? (один греет, а другой – охлаждает). Как называется это свойство? (назначение для чего служит объект)
Чем различаются эти объекты? (один маленький, а другой – большой). Как называется это свойство? (размер)
Чем различаются эти объекты? (один белый, а другой черный) Как называется это свойство? (цвет)
Чем различаются эти объекты? (один круглый, а другой – прямоугольный) Как называется это свойство? (форма)
Чем различаются эти объекты (один кислый, а другой сладкий). Как называется это свойство? (вкус)
Чем различаются эти объекты? (один деревянный, а другой пластмассовый). Как называется это свойство? (материал, из которого изготовлен объект).
Чем различаются эти объекты (один цельный, а другой состоит из множества частей). Как называется это свойство? (состав объекта)
Чем различаются эти объекты (один учит, а другой лечит). Как называется это свойство? (действия).
Учитель обобщает ответы учащихся, говоря, что свойства объекта – э
То его размер, форма, цвет, назначение, состав и другие. Эти свойства учитель выписывает на доске (презентация)
Ключевые моменты:
Каждый объект имеет несколько свойств;
Перечислить свойства выбранных объектов:
В качестве примера берется яблоко. Дети характеризуют яблоко, называя каждый по одному из его свойств.
Аналогичным образом предлагается описать объекты «книга» и «самолет».
Затем учитель сообщает детям, что совокупность свойств объекта называется его характеристикой.
У каждого объекта множество свойств. Но если мы будем сравнивать объекты между собой, то увидим, что свойства объектов бывают общими и отличительными. Те свойства, которые есть у всех сравниваемых объектов – это общие свойства. Те свойства, которые отличают один объект от другого, – отличительные.
Например, чем похожи самолет и пароход? (это средства передвижения, транспорт). Это общее свойство этих объектов. Они похожи по назначению.
А теперь скажите, чем они различаются? (самолет – воздушный транспорт, а пароход – водный) Правильно, это их отличительные свойства: плавать по воде и летать по воздуху.
Теперь давайте рассмотрим сразу несколько объектов – например, учеников нашего класса.
Какое общее свойство у всех? (быть учениками). Теперь выделим из данной группы объекты с отличительным свойством «быть девочкой». Для девочек это свойство общее или отличительное? (общее).
Теперь выделим из группы девочек объекты с отличительным свойством «быть выше всех». Такая девочка одна. Это её отличительное свойство.
В качестве закрепления можно предложить игру: каждый ученик по очереди называет какое-либо свойство («иметь собаку», «быть отличником», «уметь играть на пианино» и др.) Те дети, которым оно присуще, поднимают руку. Назвавший свойство комментирует, для кого оно общее, а в каком случае – отличительное.
Можно детям предложить следующее задание: учитель устно задает каждому ребенку для анализа свойство или раздает их названия на карточках; ученик называет два объекта, для которых это свойство общее, и два объекта, которые этим свойством отличаются. Например, свойство «размер» может быть общим для ручки и карандаша, но отличительным для слона и муравья.
Решение информационных задач
Задание на закрепление умения планомерно анализировать объекты
Запиши объекты, обладающие общим свойством, указывающим на назначение
а) Человек использует для еды: _____________________________________
б) Человек использует для передвижения: ______________________________________________________________________
Данные для справки:
глобус виноград лимон
яблоко автомобиль груша
велосипед пароход самолёт
конфета ложка автобус
Задание на формирование умений выделять и формулировать общие и отличительные свойства объекта
Рассмотри объекты
Общее свойство: геометрическая фигура, имеет углы.
Назови и запиши отличительные свойства объектов:
Отличительные свойства:
1) Четырёхугольник: имеет __________ угла и _______________ стороны.
2) Квадрат: ___________________ равных угла и __________ равные стороны.
3) Ромб:________________________________________________
_________________________________________________________
4) Треугольник: ________________________________________
________________________________________________________
Задание на формирование умений выделять и формулировать общие и отличительные свойства объекта
Дополни таблицы
Объекты
Общее свойство
Отличительное свойство
мяч
круглый
можно играть
яблоко
круглое
можно есть
А)
воздушный шар
может летать
лёгкий
самолёт
может летать
Б)
утка
может плавать
живая
лодка
может плавать
В)
вишня
съедобная
апельсин
оранжевый
Г)
книга
хранит информацию
компьютер
Д)
луна
солнце
Задание на отработку навыков выделять
свойства объекта
а) Какое свойство указывает на назначение объекта?
является носителем информации
можно покрасить в синий цвет
может высоко подпрыгивать
можно поставить на полку
б) Какое свойство указывает на форму объекта?
круглый
синий
далёкий
полезный
в) Какое свойство указывает на размер объекта?
круглый
синий
большой
нужный
г) Какое свойство указывает на материал, из которого сделан объект?
синий
круглый
пластмассовый
важный
д) Какое свойство указывает на цвет объекта?
круглый
жёлтый
деревянный
сладкий
Компьютерный практикум
Работа с графическим редактором. Учащиеся должны усвоить инструмент «надпись». Каждому ученику дается одно из свойств (назначение, форма, цвет, размер, состав действия). Его задача – изобразить два объекта с одинаковым заданным свойством и подписать имя каждого из них, а в заголовке написать, какое свойство характерно для обоих объектов.(например, заголовок можно иметь вид: «Свойств – форма», если объекты – «бублик» и «колесо»)
Обобщение и подведение итогов:
каждый объект имеет множество свойств;
совокупность свойств – это характеристика объекта;
свойство объекта указывает на его размер, назначение форму, цвет, состав, действия;
узнать объект можно по совокупности его свойств.
Мы используя Vue, разрабатываем компоненты различного рода и условий применения. Одной из ключевых частей любых компонентов — это их интерфейс. Во Vue, передаваемые свойства — являются очень важной, если не самой важной, частью интерфейса компонента.
В ситуации, когда компонент требует множество данных, можно применить несколько способов их передачи. Рассмотрим их.
Набор свойств
Одним из возможных способов — это создать для каждого атомарного значения — отдельное свойство. Посмотрим на код компонента использующий подобный подход:
Шаблон
<template>
<div>
<div>First name: {{ firstName }}</div>
<div>Last name: {{ lastName }}</div>
<div>Birth year: {{ birthYear }}</div>
</div>
</template>
Скрипт
const MIN_BIRTH_YEAR = 1900
export default {
name: ‘PersonInfo’,
props: {
firstName: {
type: String,
required: true,
validator: firstName => firstName !== »
},
lastName: {
type: String,
required: true,
validator: lastName => lastName !== »
},
birthYear: {
type: Number,
required: true,
validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear()
}
}
}
Посмотрим на использование этого компонента
<!— Other part of html template—>
<PersonInfo
first-name=»Jill»
last-name=»Smith»
:birth-year=»2000″
/>
<!— Other part of html template—>
Рассмотрим преимущества и недостатки такого подхода
Преимущества
- Все свойства — независимы. При невалидности одного из значений — сообщение об ошибке будет более точным
- Наглядно содержание передаваемых свойств
- «Плоское лучше вложенного»
- Добавление новых необязательных свойств довольно легкое дело: просто добавляем свойство, которое использует параметр default
props: {
firstName: {
type: String,
required: true,
},
lastName: {
type: String,
required: true,
},
birthYear: {
type: Number,
required: true,
validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear()
},
city: {
type: String,
default: ‘New York’
}
}
Недостатки
- Достаточно многословный код в родительском компоненте, особенно, когда данные берутся из одного объекта. Пример:
<!— Other part of html template—>
<PersonInfo
:first-name=»person.firstName»
:last-name=»person.lastName»
:birth-year=»person.birthYear»
/>
<!— Other part of html template—>
- Многословность в определении свойств (в сравнении с описанием объекта)
Свойство-объект
Существуют ситуации, когда атомарными являются данные не примитивных типов. В заданном примере такими данными может быть объект person.
Рассмотрим пример:
Шаблон
<template>
<div>
<div>First name: {{ person.firstName }}</div>
<div>Last name: {{ person.lastName }}</div>
<div>Birth year: {{ person.birthYear }}</div>
</div>
</template>
Скрипт
import quartet from ‘quartet’ // npm validation package
const v = quartet()
const MIN_BIRTH_YEAR = 1900
export default {
name: ‘PersonInfo’,
props: {
person: {
type: Object,
required: true,
validator: v({
firstName: ‘string’,
lastName: ‘string’,
birthYear: v.and(
‘safe-integer’,
v.min(MIN_BIRTH_YEAR),
v.max(new Date().getFullYear())
)
})
}
}
}
Посмотрим на использование:
<!— Other part of html template—>
<PersonInfo :person=»person»/>
<!— or (bad) —>
<PersonInfo :person=»{ firstName: ‘Jill’, lastName: ‘Smith’, birthYear: 2000 }»/>
<!— Other part of html template—>
Рассмотрим преимущества и недостатки
Преимущества
- Код в родительском компоненте становится короче
- При наличии определённой структуры данных, которая не меняется код становится менее избыточным
Недостатки
- Все значения становятся связанными одним объектом. При невалидности одного из значений — сообщение об ошибке будет говорить о невалидности всего объекта
- При использовании объекта в родительском компоненте: содержание передаваемых данных скрывается за абстракцией этого объекта
- Дополнительный уровень вложенности в компоненте
- Добавление новых необязательных свойств со значениями внутрь объекта невозможно (не знаю как это сделать)
- Для валидации объекта в той же степени, нужно использовать дополнительные инструменты валидации (напр. библиотеку валидации quartet)
Выводы
Я пришел к таким выводам:
- использование отдельных свойств — более предпочтительно.
- Использование свойства-объекта допустимо, когда структура данных этого объекта не будет пополнятся дополнительными необязательными полями со значением по умолчанию.
P. S
Буду рад узнать ваши критерии выбора. Какой подход вы используете и почему? В прочем это и есть основная цель написания этой статьи. Может кто из вас знает лучшие практики и их обоснование? Спасибо, что уделили время.
Update 19:26, 16.01.2019
Также существует третий вариант c v-bind. Смотри обсуждение здесь
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.