Поиск

JavaScript Course 2020 Автор: Jonas Schmedtmann Продолжительность: 68:12:54 Язык: Английский Содержание: 01 Welcome, Welcome, Welcome! 02 JavaScript Fundamentals – Part 1 03 JavaScript Fundamentals – Part 2 04 How to Navigate This Course 05 Developer Skills & Editor Setup 06 [OPTIONAL] HTML & CSS Crash Course 07 JavaScript in the Browser_ DOM and Events Fundamentals 08 How JavaScript Works Behind the Scenes 09 Data Structures, Modern Operators and Strings 10 A Closer Look at Functions 11 Working With Arrays 12 Numbers, Dates, Intl and Timers 13 Advanced DOM and Events 14 Object-Oriented Programming (OOP) With JavaScript 15 Mapty App_ OOP, Geolocation, External Libraries, and More! 16 Asynchronous JavaScript_ Promises, Async_Await, and AJAX 17 Modern JavaScript Development_ Modules, Tooling, and Functional 18 Forkify App_ Building a Modern Application 19 Setting Up Git and Deployment 20 The End! Или по ссылке с Телеграм канала: Здесь [Udemy] The Complete JavaScript Course 2021 From Zero to Expert! [01-2021, ENG] [rutracker-5881046].torrent

Классы В современном JavaScript появился новый, «более красивый» синтаксис для классов. Новая конструкция class – удобный «синтаксический сахар» для задания конструктора вместе с прототипом. Class Синтаксис для классов выглядит так: class Название [extends Родитель] { constructor методы } Например: 'use strict'; class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); } } let user = new User("Вася"); user.sayHi(); // Вася Функция constructor запускается при создании new User, остальные методы записываются в User.prototype. Это объявление примерно аналогично такому: function User(name) { this.name = name; } User.prototype.sayHi = function() { alert(this.name); }; В обоих случаях new User будет создавать объекты. Метод sayHi также в обоих случаях находится в прототипе. Но при объявлении через class есть и ряд отличий: User нельзя вызывать без new, будет ошибка. Объявление класса с точки зрения области видимости ведёт себя как let. В частности, оно видно только в текущем блоке и только в коде, который находится ниже объявления (Function Declaration видно и до объявления). Методы, объявленные внутри class, также имеют ряд особенностей: Метод sayHi является именно методом, то есть имеет доступ к super. Все методы класса работают в строгом режиме use strict, даже если он не указан. Все методы класса не перечислимы. То есть в цикле for..in по объекту их не будет. Class Expression Также, как и Function Expression, классы можно задавать «инлайн», в любом выражении и внутри вызова функции. Это называется Class Expression: 'use strict'; let User = class { sayHi() { alert('Привет!'); } }; new User().sayHi(); В примере выше у класса нет имени, что один-в-один соответствует синтаксису функций. Но имя можно дать. Тогда оно, как и в Named Function Expression, будет доступно только внутри класса: 'use strict'; let SiteGuest = class User { sayHi() { alert('Привет!'); } }; new SiteGuest().sayHi(); // Привет new User(); // ошибка В примере выше имя User будет доступно только внутри класса и может быть использовано, например, для создания новых объектов данного типа. Наиболее очевидная область применения этой возможности – создание вспомогательного класса прямо при вызове функции. Например, функция createModel в примере ниже создаёт объект по классу и данным, добавляет ему _id и пишет в «реестр» allModels: 'use strict'; let allModels = {}; function createModel(Model, ...args) { let model = new Model(...args); model._id = Math.random().toString(36).slice(2); allModels[model._id] = model; return model; } let user = createModel(class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); } }, "Вася"); user.sayHi(); // Вася alert( allModels[user._id].name ); // Вася Геттеры, сеттеры и вычисляемые свойства В классах, как и в обычных объектах, можно объявлять геттеры и сеттеры через get/set, а также использовать […] для свойств с вычисляемыми именами: 'use strict'; 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(' '); } // вычисляемое название метода ["test".toUpperCase()]() { alert("PASSED!"); } }; let user = new User("Вася", "Пупков"); alert( user.fullName ); // Вася Пупков user.fullName = "Иван Петров"; alert( user.fullName ); // Иван Петров user.TEST(); // PASSED! При чтении fullName будет вызван метод get fullName(), при присвоении – метод set fullName с новым значением. class не позволяет задавать свойства-значения В синтаксисе классов, как мы видели выше, можно создавать методы. Они будут записаны в прототип, как например User.prototype.sayHi. Однако, нет возможности задать в прототипе обычное значение (не функцию), такое как User.prototype.key = "value". Конечно, никто не мешает после объявления класса в прототип дописать подобные свойства, однако предполагается, что в прототипе должны быть только методы. Если свойство-значение, всё же, необходимо, то можно создать геттер, который будет нужное значение возвращать. Статические свойства Класс, как и функция, является объектом. Статические свойства класса User – это свойства непосредственно User, то есть доступные из него «через точку». Для их объявления используется ключевое слово static. Например: 'use strict'; class User { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } static createGuest() { return new User("Гость", "Сайта"); } }; let user = User.createGuest(); alert( user.firstName ); // Гость alert( User.createGuest ); // createGuest ... (функция) Как правило, они используются для операций, не требующих наличия объекта, например – для фабричных, как в примере выше, то есть как альтернативные варианты конструктора. Или же, можно добавить метод User.compare, который будет сравнивать двух пользователей для целей сортировки. Также статическими удобно делать константы: 'use strict'; class Menu { static get elemClass() { return "menu" } } alert( Menu.elemClass ); // menu Наследование Синтаксис: class Child extends Parent { ... } Посмотрим как это выглядит на практике. В примере ниже объявлено два класса: Animal и наследующий от него Rabbit: 'use strict'; class Animal { constructor(name) { this.name = name; } walk() { alert("I walk: " + this.name); } } class Rabbit extends Animal { walk() { super.walk(); alert("...and jump!"); } } new Rabbit("Вася").walk(); // I walk: Вася // and jump! Как видим, в new Rabbit доступны как свои методы, так и (через super) методы родителя. Это потому, что при наследовании через extends формируется стандартная цепочка прототипов: методы Rabbit находятся в Rabbit.prototype, методы Animal – в Animal.prototype, и они связаны через __proto__: 'use strict'; class Animal { } class Rabbit extends Animal { } alert( Rabbit.prototype.__proto__ == Animal.prototype ); // true Как видно из примера выше, методы родителя (walk) можно переопределить в наследнике. При этом для обращения к родительскому методу используют super.walk(). С конструктором – немного особая история. Конструктор constructor родителя наследуется автоматически. То есть, если в потомке не указан свой constructor, то используется родительский. В примере выше Rabbit, таким образом, использует constructor от Animal. Если же у потомка свой constructor, то, чтобы в нём вызвать конструктор родителя – используется синтаксис super() с аргументами для родителя. Например, вызовем конструктор Animal в Rabbit: 'use strict'; class Animal { constructor(name) { this.name = name; } walk() { alert("I walk: " + this.name); } } class Rabbit extends Animal { constructor() { // вызвать конструктор Animal с аргументом "Кроль" super("Кроль"); // то же, что и Animal.call(this, "Кроль") } } new Rabbit().walk(); // I walk: Кроль Для такого вызова есть небольшие ограничения: Вызвать конструктор родителя можно только изнутри конструктора потомка. В частности, super() нельзя вызвать из произвольного метода. В конструкторе потомка мы обязаны вызвать super() до обращения к this. До вызова super не существует this, так как по спецификации в этом случае именно super инициализирует this. Второе ограничение выглядит несколько странно, поэтому проиллюстрируем его примером: 'use strict'; class Animal { constructor(name) { this.name = name; } } class Rabbit extends Animal { constructor() { alert(this); // ошибка, this не определён! // обязаны вызвать super() до обращения к this super(); // а вот здесь уже можно использовать this } } new Rabbit(); Итого Классы можно объявлять как в основном потоке кода, так и «инлайн», по аналогии с Function Declaration и Expression. В объявлении классов можно использовать методы, геттеры/сеттеры и вычислимые названия методов. При наследовании вызов конструктора родителя осуществляется через super(...args), вызов родительских методов – через super.method(...args). Концепция классов, которая после долгих обсуждений получилась в стандарте ECMAScript, носит название «максимально минимальной». То есть, в неё вошли только те возможности, которые уж точно необходимы. В частности, не вошли «приватные» и «защищённые» свойства. То есть, все свойства и методы класса технически доступны снаружи. Возможно, они появятся в будущих редакциях стандарта.