17. Создание и наследование классов в js на основе стандартов Ecma 6.

Ecma6 – язык-прородитель JS, не имеет возможностей ввода-вывода (раньше). А также стандарт, обновлённый в 2015 году.

Классы определяются в ECMAScript 6 (ES6) следующим образом:

class Point {

constructor(x, y) {

this.x = x;

this.y = y;

}

toString() {

return '(' + this.x + ', ' + this.y + ')';

}

}

Использовать этот класс можно просто, вызвав конструктор функции:

> var p = new Point(25, 8);

> p.toString()

'(25, 8)'

Вызвать этот класс можно только через new, а не через вызов функции.

В отличие от функций, определения классов не поднимаются. Таким образом, класс существует только после того, как его определение было достигнуто и выполнено. Попытка создания класса до этого момента приведет к «ReferenceError».

Три вида методов создания классов:

1. конструктор

Он имеет особенности, которые обычный конструктор функции не имеет (главным образом, способность конструктора вызывать конструктор базового класса через super()). Этот метод является особенным, так как он определяет функцию, которая представляет собой класс:

> Foo === Foo.prototype.constructor

true

> typeof Foo

'function'

2. статические методы

Статические свойства (или свойства класса) являются свойствами самого Foo. Если вы определили метод с помощью static, значит вы реализовали метод класса:

> typeof Foo.staticMethod

'function'

> Foo.staticMethod()

'classy'

3. прототипные методы

свойства прототипа Foo являются и свойствами Foo.prototype. Это, как правило, методы, и наследуются экземплярами Foo.

> typeof Foo.prototype.prototypeMethod

'function'

> foo.prototypeMethod()

'prototypical'

Наследование

Ключевое слово extends позволяет создать класс-наследник существующего конструктора (который возможно был определен с помощью класса):

class Point {

constructor(x, y) {

this.x = x;

this.y = y;

}

toString() {

return '(' + this.x + ', ' + this.y + ')';

}

}

class ColorPoint extends Point {

constructor(x, y, color) {

super(x, y); // (A)

this.color = color;

}

toString() {

return super.toString() + ' in ' + this.color; // (B)

}

}

В данном случае мы имеем два вида классов:

• Point — это базовый класс, потому что он не имеет выражения extends.

• ColorPoint — производный класс.

Есть два способа использовать ключевое слово super:

• Конструктор класса (псевдо-метод «constructor» в теле класса), использует его как вызов функции (_super(•••)_), для того, чтобы вызвать базовый конструктор (строка A).

• Определения методов (в объектах, заданных через литерал, или классах, статических или нет), используют это для вызова свойства (_super.prop_), или вызова метода (_super.method(•••)_), для ссылки на свойства базового класса (строка B).

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

Метод объекта - это функция, которая добавлена в ассоциативный массив.

Добавление свойств

o.test = 5

o["test"] = 5

Квадратные скобки используются в основном, когда название свойства находится в переменной.

Доступ к свойствам

Доступ к свойству осуществляется точно так же:

alert (o.test)

alert (o['test'])

Все свойства объектов - public, т.е. при определении свойства никак нельзя ограничить доступ к свойству. В JS есть спец. выверты для создания private свойств, связанные с замыканиями. Они рассмотрены вместе с наследованием объектов.

Удаление свойств

Удаляет свойство оператор delete:

o.test = 5

delete o.test

o['bla'] = true

Событие - это сигнал от браузера о том, что что-то произошло. Множество событий:

• DOM-события. Например, событие click происходит при клике на элементе.

• События окна. Например, событие resize - при изменении размера окна браузера.

Именно DOM-события связывают действия, происходящие в HTML, с кодом JS, обеспечивая динамический веб-интерфейс.

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

Способов передачи этого объекта обработчику существует ровно два, и они зависят от способа его установки и от браузера.

1) function doSomething(event) {

event - будет содержать объект события}

element.onclick = doSomething;

При вызове обработчика объект события event будет передан ему первым аргументом.

2) В Internet Explorer существует глобальный объект window.event, который хранит в себе информацию о последнем событии.

function doSomething() {

window.event - объект события}

element.onclick = doSomething;

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

•button –состояние кнопок мыши во время события

•clientXclient-координаты указателя мыши относительно области окна

•altKey-состояние клавиши alt

•ctrlKey состояние клавиши ctrl

•shiftKey состояние клавиши shift

•keyCode код нажатой клавиши

Конструктор объектов - это шаблон, на основе которого создаются объекты. Написанный один раз конструктор, позволяет создать неограниченное количество объектов любой сложности написав лишь одну строчку кода.

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