Знакомство с ES6. Урок 22

ES6
let&const
Деструктуризация (массивов и объектов)
…Spread-оператор
Стрелочные функции
Шаблонные строки
ООП. Классы. Наследование.

Классы

Объявление класса
class Название [extends Родитель] {
constructor
методы
}

Объявление класса
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}

Выражение класса
//безымянный
var Polygon = class {
constructor(height, width) {
this.height = height; this.width = width;
}
};
//именованный
var Polygon = class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
};

Создание объекта и прототип
Constructor запускается при создании new Object, остальные методы записываются в Object.prototype
class User {
constructor(name) {
this.name = name;
}
sayHi() { console.log(this.name);}
}
let user = new User("Вася");

Создание объекта и прототип
function User(name) {
this.name = name;
}
User.prototype.sayHi = function() { console.log(this.name);
};

Всплытие (hoisting)
Разница между объявлением функции (function declaration) и объявлением класса (class declaration) в том, что объявление функции совершает подъём (hoisted), в то время как объявление класса — нет
var p = new Polygon();
class Polygon {}
//Uncaught ReferenceError: Polygon is not defined

Статические методы
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx*dx + dy*dy);
}
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));//7.07....

Геттеры, сеттеры
class User {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
set fullName(newValue) {
[this.firstName, this.lastName] = newValue.split(' ');
}
};
let user = new User('Maksim', 'Hladki');
console.log(user.fullName);//Maksim Hladki
user.fullName = "Ivan Ivanov";
console.log(user.fullName);//Ivan Ivanov

Пример
class Rectangle {
constructor (width, height) {
this._width = width
this._height = height
}
set width (width) { this._width = width}
get width () { return this._width}
set height (height) { this._height = height}
get height () { return this._height}
get area () { return this._width * this._height }
}
let test = new Rectangle(50, 20);
console.log(test.area);//1000

Вычисляемые имена методов
class Foo() {
myMethod() {}
}
class Foo() {
['my'+'Method']() {}
}
const m = 'myMethod';
class Foo() {
[m]() {}
}

Наследование
//Только один конструктор, прототип, базовый класс!
class Child extends Parent {
//TODO logic
}

Пример
class Point {
constructor(x, y) {
this.x = x; this.y = y; }
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
class ColorPoint extends Point {
constructor(color) {
super(0, 0);
this.color = color;
}
toString() {
return super.toString() + ' in ' + this.color;
}
}
let cPoint = new ColorPoint('red');
console.log(cPoint.toString());//(0, 0) in red

Наследование статических методов
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
//TODO
}
console.log(Bar.classMethod());//hello

Super
//Используется для вызова функций, принадлежащих
//родителю объекта
super([arguments]);//вызов родительского конструктора
super.functionOnParent([arguments]);

Пример: вызов конструктора
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(length) {
super(length, length);
}
get area() {
return this.height * this.width;
}
}
Let square = new Square(10);

Вызов метода
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
static classMethod() {
return super.classMethod() + ', too';
}
}
Bar.classMethod();//hello, too

Mixins

Mixins
// Абстрактные подклассы (mix-ins) — это шаблоны для классов.
//У класса может быть только один родительский класс, поэтому
// множественное наследование невозможно.
//Функциональность должен предоставлять родительский класс
class B extends A, M {}// Uncaught SyntaxError: Unexpected token ,
// множественного наследования нет
const mixin = base => class extends base {
/* свойства и методы */
}

Пример
class Person { ··· }
const Storage = Sup => class extends Sup {
save(database) { ··· }
};
const Validation = Sup => class extends Sup {
validate(schema) { ··· }
};
class Employee extends Storage(Validation(Person)) { ··· }

Пример
let MyMixin = (superclass) => class extends superclass {
test() { console.log('test from MyMixin');
}
};
class MyClass extends MyMixin(MyBaseClass) {
/* ... */
}
let c = new MyClass();
c.test();//test from MyMixin

Symbol

Тип данных Symbol
Уникальный и неизменяемый тип данных, который может быть использован как идентификатор для свойств объектов
Символьный объект — это объект-обертка для примитивного символьного типа
let sym = Symbol("foo");
console.log(typeof sym);//symbol
let symObj= Object(sym);
console.log(typeof symObj);//object
console.log(Symbol("name") == Symbol("name"));//false

Тип данных Symbol
let isAdmin = Symbol("isAdmin");
let user = {
name: "Вася",
[isAdmin]: true
};
console.log(user[isAdmin]);//true

Тип данных Symbol
Свойство, объявленное через символ, не будет видно в for-in, Object.keys, Object.getOwnPropertyNames, также не будет добавлено при использовании JSON.stringify

Тип данных Symbol
let user = {
name: "Вася",
age: 30,
[Symbol.for("isAdmin")]: true
};
//в цикле for..in не будет символа
console.log(Object.keys(user));//["name", "age"]
//доступ к свойству через глобальный символ — работает
console.log(user[Symbol.for("isAdmin")]);//true

Глобальные символы
Глобальный реестр символов позволяет иметь общие глобальные символы, которые можно получить из реестра по имени. Используется метод for
//создание символа в реестре
let name = Symbol.for("name");
//символ уже есть, чтение из реестра
console.log(Symbol.for("name") == name);//true

Встроенные символы (Well-known)

Promise

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

callback hell
getData(function(a){
getMoreData(a, function(b){
getMoreData(b, function(c){
getMoreData(c, function(d){
getMoreData(d, function(e){
...
});
});
});
});
});

Синтаксис
new Promise(executor);
new Promise(function(resolve, reject) { ... });
// onFulfilled – срабатывают, когда promise в состоянии «выполнен успешно»
// onRejected – срабатывают, когда promise в состоянии «выполнен с ошибкой»

Алгоритм
Код, которому надо сделать что-то асинхронно, создаёт объект promise и возвращает его
Внешний код, получив promise, навешивает на него обработчики
После завершения процесса асинхронный код переводит promise в состояние fulfilled (с результатом) или rejected (с ошибкой). При этом автоматически вызываются соответствующие обработчики во внешнем коде

Навешивание обработчиков
promise.then(onFulfilled, onRejected);
//onFulfilled – функция, которая будет вызвана с результатом при resolve
//onRejected – функция, которая будет вызвана с ошибкой при reject
//onFulfilled сработает при успешном выполнении
promise.then(onFulfilled);
//onRejected сработает при ошибке
promise.then(null, onRejected);

Метод then
Метод возвращает Promise и принимает два аргумента, callback-функции для случаев выполнения и отказа соответственно
p.then(onFulfilled, onRejected);
p.then(
function(value) {
//выполнение
},
function(reason) {
//отказ
}
);

Метод catch
Для того, чтобы поставить обработчик только на ошибку, вместо .then(null, onRejected) можно написать .catch(onRejected)
promise.catch(onRejected);
promise.catch(function(reason) {
//отказ
});
// catch всегда возвращает положительный промис

throw в промисах
Синхронный throw – то же самое, что reject
let p = new Promise((resolve, reject) => {
//то же что reject(new Error("Ошибка"))
throw new Error("Ошибка");
});
p.catch(console.log);//Ошибка

Эмуляция асинхронности
let promise = new Promise((resolve, reject) => {
setTimeout(() => { resolve("result");
}, 1000);
});
promise.then(
result => {
console.log("Fulfilled: " + result);
//result - аргумент resolve
},
error => {
console.log("Rejected: " + error);
//error - аргумент reject
}
);
//Fulfilled: result

Еще пример
var promise = new Promise(function(resolve, reject) {
console.log('in Promise constructor function'); setTimeout(function() {
console.log('in setTimeout callback');
resolve('foo');
}, 100);
});
console.log('created promise');
promise.then(function(result) {
console.log('promise returned: ' + result);
});
console.log('hooked promise.then()');
//in Promise constructor function
//created promise, hooked promise.then()
//in setTimeout callback
//promise returned: foo

Promise после reject/resolve – неизменны
let promise = new Promise((resolve, reject) => { // через 1 секунду готов результат: result
setTimeout(() => resolve("result"), 1000);
// через 2 секунды — reject с ошибкой, он будет проигнорирован
setTimeout(() => reject(new Error("ignored")), 2000);
});
promise.then(
result => console.log("Fulfilled: " + result),//сработает
error => console.log("Rejected: " + error)//не сработает
);
//Fulfilled: result

Промисификация
function httpGet(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
if (this.status == 200) {
resolve(this.response);
}
else { var error = new Error(this.statusText);
error.code = this.status;
reject(error); } };
xhr.onerror = function() {
reject(new Error("Network Error")); };
xhr.send(); });}
Процесс, при котором из асинхронной функции делают обертку, возвращающую promise

Метод Promise.resolve
Метод возвращает Promise, выполненный с переданным значением. Если переданное значение является thenable (имеет метод then), возвращаемое обещание будет следовать thenable - объекту, принимая свое состояние; в ином случае возвращаемое обещание будет выполнено с переданным значением
Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);

Пример 1
Promise.resolve("Success").then(
function(value) {
console.log(value);//"Success"
},
function(value) {
//не будет вызвана }
);

Пример 2
var p = Promise.resolve([1,2,3]);
p.then(function(v) {
console.log(v[0]);//1
});

Пример 3
var original = Promise.resolve(true);
console.log(original);//Promise {resolved: true}
var cast = Promise.resolve(original);
cast.then(function(v) {
console.log(v);//true
});

Метод Promise.reject
// Метод возвращает объект Promise,
//который был отклонен по указанной причине
Promise.reject(reason);

Метод Promise.all
Возвращает обещание, которое выполнится тогда, когда будут выполнены все обещания, переданные в виде перечисляемого аргумента, или отклонено любое из переданных обещаний
Promise.all(iterable);
//iterable - перечисляемый объект, например, массив (Array)

Пример 1
var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "foo");
});
Promise.all([p1, p2, p3]).then(values => {
console.log(values);
});
//[3, 1337, "foo"]

Пример 2
var p1 = Promise.resolve(3);
var p2 = Promise.reject("Promise Reject");
var p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "foo");
});
Promise.all([p1, p2, p3]).then(
values => console.log(values),
error => console.log(error)
);
//Promise Reject

Метод Promise.race
Метод возвращает выполненое или отклоненное обещание, в зависимости от того, с каким результатом завершится первое из переданных обещаний, со значением или причиной отклонения этого обещания
Promise.race(iterable);
//iterable - итерируемый объект, такой как (Array)

Пример 1
var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "один");
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "два");
});
Promise.race([p1, p2]).then(function(value) {
console.log(value);//"два"
//Оба вернули resolve, однако p2 вернул результат первым
});

Пример 2
var p1 = Promise.resolve(3);
var p2 = Promise.reject("Promise Reject");
var p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "foo");
});
Promise.race([p1, p2, p3]).then(
values => console.log(values),
error => console.log(error)
);
//3

Пример 3
var p3 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "три");
});
var p4 = new Promise(function(resolve, reject) {
setTimeout(reject, 500, "четыре");
});
Promise.race([p3, p4]).then(function(value) {
console.log(value);//"три"
//p3 быстрее, поэтому выведется значение его resolve
}, function(reason) {
//Не вызывается
});

Пример 4
var p5 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "пять");
});
var p6 = new Promise(function(resolve, reject) {
setTimeout(reject, 100, "шесть");
});
Promise.race([p5, p6]).then(
function(value) {
//Не вызывается
},
function(reason) {
console.log(reason);//"шесть"
//p6 быстрее, выводится его rejects
}
);

Цепочки промисов
something(...)
.then(...)
.then(...)
.then(...);
Если очередной then вернул промис, то далее по цепочке будет передан не сам этот промис, а его результат

Пример 1
Promise.resolve("Success")
.then(x => { console.log("THEN1", x); })
.catch(x => { console.log("CATCH1", x); })
.then(x => { console.log("THEN2", x); })
.catch(x => { console.log("CATCH2", x); });
//THEN1 Success
//THEN2 undefined

Пример 2
Promise.reject("Fail")
.then(x => { console.log("THEN1", x); })
.catch(x => { console.log("CATCH1", x); })
.then(x => { console.log("THEN2", x); })
.catch(x => { console.log("CATCH2", x); });
//CATCH1 Fail
//THEN2 undefined

Пример 3
Promise.reject("Fail")
.catch(x => {
console.log("CATCH1", x);
return Promise.reject("B");
})
.then(x => { console.log("THEN1", x); })
.catch(x => { console.log("CATCH2", x); })
.then(x => { console.log("THEN2", x); });
//CATCH1 Fail
//CATCH2 B
//THEN2 undefined

Fetch API
//Метод fetch: замена XMLHttpRequest
let promise = fetch(url[, options]);
//url – URL, на который сделать запрос,
//options – необязательный объект с настройками запроса.

Свойства options

Пример 1
fetch('/article/fetch/user.json')
.then(function(response) {
console.log(response.headers.get('Content-Type'));
//application/json; charset=utf-8
console.log(response.status);//200
return response.json();
}) .then(function(user) {
console.log(user.name);//Maks
})
.catch(console.log);