- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Методы объектов. (Занятие 8) презентация
Содержание
- 1. Методы объектов. (Занятие 8)
- 2. План занятия Методы объектов, this Преобразование объектов:
- 3. Методы объектов
- 4. Методы у объектов var user = {
- 5. Доступ к объекту через this var user
- 6. Доступ к объекту через this var user
- 7. Доступ к объекту через this var user
- 8. this у функции function sayHi() { console.log( this.firstName ); }
- 9. this у функции var user = {
- 10. Значение this без контекста function func() {
- 11. Что выведет этот код? var arr =
- 12. // "a","b",function Задачка 8.1 решение
- 13. Создайте объект calculator с тремя методами:
- 14. var calculator = { sum:
- 15. Преобразование объектов: toString и valueOf
- 16. Логическое преобразование if ({} && []) {
- 17. Строковое преобразование var user = {
- 18. Строковое преобразование var user = {
- 19. Строковое преобразование alert( [1, 2] );
- 20. Численное преобразование var room = {
- 21. Какими будут результаты alert? Задачка 8.3 var
- 22. Какими будут результаты у выражений? Задачка 8.4
- 23. Создание объектов через «new»
- 24. Конструктор function Animal(name) { this.name
- 25. Конструктор Создаётся новый пустой объект. Ключевое слово
- 26. Конструктор animal = { name: 'Elephant', canWalk: true }
- 27. Конструктор function Animal(name) { //
- 28. Правила обработки return При вызове return с
- 29. Правила обработки return function BigAnimal() {
- 30. Правила обработки return function BigAnimal() {
- 31. Создание методов в конструкторе function User(name) {
- 32. Локальные переменные function User(firstName, lastName) {
- 33. Дескрипторы, геттеры и сеттеры свойств
- 34. Дескрипторы Object.defineProperty(obj, prop, descriptor)
- 35. Дескрипторы value — значение свойства, по умолчанию
- 36. Обычное свойство var user = {};
- 37. Свойство-константа 'use strict'; var user =
- 38. Свойство, скрытое для for..in var user =
- 39. Свойство, скрытое для for..in var user =
- 40. Свойство-функция var user = {
- 41. Свойство-функция var user = {
- 42. get/set в литералах var user = {
- 43. Статические и фабричные методы
- 44. Статические свойства function Article() {
- 45. Статические методы function Article() {
- 46. Сравнение объектов function Journal(date) {
- 47. Статические методы function Journal() { /*...*/ }
- 48. Фабричные методы new Date() new Date(milliseconds) new Date(year, month, day ...) new Date(datestring)
- 49. function User(userData) { if (userData)
- 50. function User() { this.sayHi =
- 51. Преимущества фабричных методов Лучшая читаемость кода. Лучший контроль ошибок. Удобная расширяемость.
- 52. План занятия Методы объектов, this Преобразование объектов:
- 53. 2015
План занятия Методы объектов, this Преобразование объектов: toString и valueOf Создание объектов через «new» Дескрипторы, геттеры и сеттеры свойств Статические и фабричные методы
Слайд 2План занятия
Методы объектов, this
Преобразование объектов: toString и valueOf
Создание объектов через «new»
Дескрипторы,
геттеры и сеттеры свойств
Статические и фабричные методы
Статические и фабричные методы
Слайд 4Методы у объектов
var user = {
name: 'Василий',
//
метод
sayHi: function() {
console.log( 'Привет!' );
}
};
// присвоили метод после создания объекта
user.sayBye = function() {
console.log('Пока!');
};
// Вызов метода:
user.sayHi();
Слайд 5Доступ к объекту через this
var user = {
name: 'Василий',
sayHi: function() {
console.log( this.name );
}
};
user.sayHi();
// sayHi в контексте user
Слайд 6Доступ к объекту через this
var user = {
name: 'Василий',
sayHi: function() {
console.log( user.name );
// приведёт к ошибке
}
};
var admin = user;
user = null;
admin.sayHi();
Слайд 7Доступ к объекту через this
var user = {
name: 'Василий',
sayHi: function() {
// передать текущий объект в showName
showName(this);
}
};
function showName(namedObj) {
console.log( namedObj.name );
}
user.sayHi(); // Василий
Слайд 9this у функции
var user = { firstName: 'Вася' };
var admin =
{ firstName: 'Админ' };
function func() {
console.log( this.firstName );
}
user.f = func;
admin.g = func;
// this равен объекту перед точкой:
user.f(); // Вася
admin.g(); // Админ
Слайд 10Значение this без контекста
function func() {
console.log( this );
// выведет [object Window] или [object global]
}
func();
Слайд 11Что выведет этот код?
var arr = ['a', 'b'];
arr.push(function() {
console.log(
this );
});
arr[2]();
Задачка 8.1
устно
Слайд 13Создайте объект calculator с тремя методами:
read() запрашивает prompt два значения и
сохраняет их как свойства объекта
sum() возвращает сумму этих двух значений
mul() возвращает произведение этих двух значений
sum() возвращает сумму этих двух значений
mul() возвращает произведение этих двух значений
Задачка 8.2
Слайд 14var calculator = { sum: function() {
return this.a + this.b;
},
mul: function() {
return this.a * this.b;
},
read: function() {
this.a = +prompt('Enter A?', 0);
this.b = +prompt('Enter B?', 0);
}
};
calculator.read();
console.log( calculator.sum() );
console.log( calculator.mul() );
Задачка 8.2
решение
Слайд 16Логическое преобразование
if ({} && []) {
console.log( 'Все объекты -
true!' );
// console.log сработает
}
Слайд 17Строковое преобразование
var user = {
firstName: 'Василий'
};
alert( user ); //
[object Object]
Слайд 18Строковое преобразование
var user = {
firstName: 'Василий',
toString: function()
{
return 'Пользователь ' + this.firstName;
}
};
alert( user ); // Пользователь Василий
Слайд 19Строковое преобразование
alert( [1, 2] );
// toString для массивов выводит список
элементов “1,2"
alert( new Date );
// toString для дат выводит дату в виде строки
alert( function() {} );
// toString для функции выводит её код
alert( new Date );
// toString для дат выводит дату в виде строки
alert( function() {} );
// toString для функции выводит её код
Слайд 20Численное преобразование
var room = {
number: 777,
valueOf: function()
{ return this.number; },
toString: function() { return this.number; }
};
alert( +room ); // 777, вызвался valueOf
delete room.valueOf; // valueOf удалён
alert( +room ); // 777, вызвался toString
Слайд 21Какими будут результаты alert?
Задачка 8.3
var foo = {
toString: function()
{
return 'foo';
},
valueOf: function() {
return 2;
}
};
alert( foo );
alert( foo + 1 );
alert( foo + '3' );
устно
Слайд 22Какими будут результаты у выражений?
Задачка 8.4
new Date(0) - 0
new Array(1)[0] +
“"
({})[0]
[1] + 1
[1,2] + [3,4]
[] + null + 1
[[0]][0][0]
({} + {})
({})[0]
[1] + 1
[1,2] + [3,4]
[] + null + 1
[[0]][0][0]
({} + {})
устно
Слайд 24Конструктор
function Animal(name) {
this.name = name;
this.canWalk = true;
}
var
animal = new Animal('Elephant');
Слайд 25Конструктор
Создаётся новый пустой объект.
Ключевое слово this получает ссылку на этот объект.
Функция
выполняется. Как правило, она модифицирует this, добавляет методы, свойства.
Возвращается this.
Возвращается this.
Функция, запущенная через new, делает следующее:
Слайд 27Конструктор
function Animal(name) {
// this = {};
// в
this пишем свойства, методы
this.name = name;
this.canWalk = true;
// return this;
}
var animal = new Animal('Elephant');
Слайд 28Правила обработки return
При вызове return с объектом, будет возвращён он, а
не this.
При вызове return с примитивным значением, оно будет отброшено.
При вызове return с примитивным значением, оно будет отброшено.
Слайд 29Правила обработки return
function BigAnimal() {
this.name = 'Мышь';
return
{ name: 'Годзилла' }; // object
}
console.log( new BigAnimal().name );
// Годзилла, получили объект вместо this
Слайд 30Правила обработки return
function BigAnimal() {
this.name = 'Мышь';
return
'Годзилла'; // string
}
console.log( new BigAnimal().name );
// Мышь, получили this (а Годзилла пропал)
Слайд 31Создание методов в конструкторе
function User(name) {
this.name = name;
this.sayHi = function() {
console.log( 'Моё имя: ' + this.name );
};
}
var ivan = new User('Иван');
ivan.sayHi(); // Моё имя: Иван
Слайд 32Локальные переменные
function User(firstName, lastName) {
// вспомогательная переменная
var
phrase = 'Привет';
// вспомогательная вложенная функция
function getFullName() {
return firstName + ' ' + lastName;
}
this.sayHi = function() {
// использование
console.log( phrase + ', ' + getFullName() );
};
}
var vasya = new User('Вася', 'Петров');
vasya.sayHi(); // Привет, Вася Петров
Слайд 35Дескрипторы
value — значение свойства, по умолчанию undefined
writable — значение свойства можно
менять, если true. По умолчанию false.
configurable — если true, то свойство можно удалять, а также менять его в дальнейшем при помощи новых вызовов defineProperty. По умолчанию false.
enumerable — если true, то свойство будет участвовать в переборе for..in. По умолчанию false.
get — функция, которая возвращает значение свойства. По умолчанию undefined.
set — функция, которая записывает значение свойства. По умолчанию undefined.
configurable — если true, то свойство можно удалять, а также менять его в дальнейшем при помощи новых вызовов defineProperty. По умолчанию false.
enumerable — если true, то свойство будет участвовать в переборе for..in. По умолчанию false.
get — функция, которая возвращает значение свойства. По умолчанию undefined.
set — функция, которая записывает значение свойства. По умолчанию undefined.
Слайд 36Обычное свойство
var user = {};
// 1. простое присваивание
user.name = 'Вася';
// 2.
указание значения через дескриптор
Object.defineProperty(user, 'name', { value: 'Вася' });
Слайд 37Свойство-константа
'use strict';
var user = {};
Object.defineProperty(user, 'name', {
value: 'Вася',
writable: false, // запретить присвоение 'user.name='
configurable: false // запретить удаление 'delete user.name'
});
// Теперь попытаемся изменить это свойство.
// в strict mode присвоение 'user.name=' вызовет ошибку
user.name = 'Петя';
Слайд 38Свойство, скрытое для for..in
var user = {
name: 'Вася',
toString: function() { return this.name; }
};
for(var key in user) console.log(key);
// name, toString
Слайд 39Свойство, скрытое для for..in
var user = {
name: 'Вася',
toString: function() { return this.name; }
};
// помечаем toString как не подлежащий перебору в for..in
Object.defineProperty(user, 'toString', {enumerable: false});
for(var key in user) alert(key); // name
Слайд 40Свойство-функция
var user = {
firstName: 'Вася',
surname: 'Петров'
};
Object.defineProperty(user, 'fullName',
{
get: function() {
return this.firstName + ' ' + this.surname;
}
});
console.log(user.fullName); // Вася Петров
Слайд 41Свойство-функция
var user = {
firstName: 'Вася',
surname: 'Петров'
};
Object.defineProperty(user, 'fullName',
{
get: function() {
return this.firstName + ' ' + this.surname;
},
set: function(value) {
var split = value.split(' ');
this.firstName = split[0];
this.surname = split[1];
}
});
user.fullName = 'Петя Иванов';
console.log( user.firstName ); // Петя
console.log( user.surname ); // Иванов
Слайд 42get/set в литералах
var user = {
firstName: 'Вася',
surname:
'Петров',
get fullName() {
return this.firstName + ' ' + this.surname;
},
set fullName(value) {
var split = value.split(' ');
this.firstName = split[0];
this.surname = split[1];
}
};
console.log( user.fullName );
// Вася Петров (из геттера)
user.fullName = 'Петя Иванов';
console.log( user.firstName );
// Петя (поставил сеттер)
console.log( user.surname );
// Иванов (поставил сеттер)
Слайд 44Статические свойства
function Article() {
Article.count++;
}
// статическое свойство-переменная
Article.count = 0;
// статическое
свойство-константа
Article.DEFAULT_FORMAT = "html";
Слайд 45Статические методы
function Article() {
Article.count++;
//...
}
Article.count = 0;
Article.showCount =
function() {
console.log( this.count ); // (1)
};
// использование
new Article();
new Article();
Article.showCount(); // (2)
Слайд 46Сравнение объектов
function Journal(date) {
this.date = date;
// ...
}
//
возвращает значение, большее 0,
// если A больше B, иначе меньшее 0
Journal.compare = function(journalA, journalB) {
return journalA.date - journalB.date;
};
bit.ly/1LtPg5t
Слайд 47Статические методы
function Journal() { /*...*/ }
Journal.formatDate = function(date) {
return
date.getDate() + '.' + (date.getMonth()+1) + '.' + date.getFullYear();
};
// ни одного объекта Journal нет, просто форматируем дату
alert( Journal.formatDate(new Date) );
Слайд 48Фабричные методы
new Date()
new Date(milliseconds)
new Date(year, month, day ...)
new Date(datestring)
Слайд 49function User(userData) { if (userData) { this.name
= userData.name;
this.age = userData.age;
} else {
this.name = 'Аноним';
}
this.sayHi = function() {
console.log(this.name)
};
}
// Использование
var guest = new User();
guest.sayHi(); // Аноним
var knownUser = new User({
name: 'Вася',
age: 25
});
knownUser.sayHi(); // Вася
Полиморфная функция конструктор
Слайд 50function User() { this.sayHi = function() {
console.log(this.name)
};
}
User.createAnonymous = function() {
var user = new User;
user.name = 'Аноним';
return user;
};
User.createFromData = function(userData) {
var user = new User;
user.name = userData.name;
user.age = userData.age;
return user;
};
// Использование
var guest = User.createAnonymous();
guest.sayHi(); // Аноним
var knownUser = User.createFromData({
name: 'Вася',
age: 25
});
knownUser.sayHi(); // Вася
Фабричные методы
Слайд 51Преимущества фабричных методов
Лучшая читаемость кода.
Лучший контроль ошибок.
Удобная расширяемость.
Слайд 52План занятия
Методы объектов, this
Преобразование объектов: toString и valueOf
Создание объектов через «new»
Дескрипторы,
геттеры и сеттеры свойств
Статические и фабричные методы
Статические и фабричные методы
