Вступление

Я был Java-разработчиком, который хотел добавить JavaScript в свой стек, и хочу стать рок-звездой JavaScript до конца 2020 года. Я глубоко изучаю JavaScript. Однако я всегда знал JavaScript. Хотя в минимальной степени я могу написать JavaScript внутри тега ‹script› и управлять DOM. Я разрабатывал на нем веб-приложения. На самом деле я знал это с тех пор, как знал Java, но я пришел к выводу, что я не знаю JavaScript.

В настоящее время я читаю об этом книги, и у меня было много моментов ага. Я выполнил несколько небольших проектов с использованием JavaScript (Node / Express - small ecommerce API и simple Estimato r, React - Simple Calculator), но то, что я обнаружил при чтении книг и документации по WEB API, углубило мое понимание язык и то, что важно знать новым разработчикам по мере их знакомства с языком.

Объекты и прототипы

Концепция объекта как представления программного модуля является основой объектно-ориентированного программирования. Однако у него есть два основных подхода: шаблон класса (некоторые могут утверждать, что это не шаблон, а нормативный подход) и шаблон-прототип. В ортодоксальном ООП класс - это план, из которого создаются объекты. Объекты - это экземпляры классов. Однако в шаблоне прототипа объекты создаются из прототипов (больше как клонов). Один прототип связывается с другим и продолжает цепочку прототипов до тех пор, пока у нас не будет прототипа, который ссылается на null.

Встроенные объекты

Каждый объектно-ориентированный язык программирования имеет стандартные встроенные объекты, которые являются центральными и ключевыми для его функциональности, и знание этих объектов обязательно для глубокого понимания языка. В JavaScript есть две категории объектов - глобальный объект и глобальные объекты.

Глобальный объект относится к объекту, который находится в глобальной области видимости, которая всегда создается, когда мы запускаем наши сценарии (только по одному для каждого контекста выполнения (EC)), и они различаются в разных средах. В Node он называется global, а в браузерах - это объект Window. В Worker это WorkerGlobalScope.

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

function coronavirus(){
    console.log("I am negative");
}
window.coronavirus(); // "I am negative"
coronavirus(); // "I am negative"

Мы можем вызвать window.coronavirus () в среде браузера точно так же, как мы можем вызвать coronavirus (), потому что названная функция, которая является встроенным объектом, привязана к окну. глобальный объект в браузере.

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

function foo() {
   console.log( this.a ); // 2
   console.log( window.b ); // 2
}
var a=2;
var b=3;
console.log( this.a ); // 2
console.log( window.b ); // 3
foo();

Это происходит из-за размаха. Глобальные переменные и глобальные объекты привязаны к глобальному объекту. Встроенные объекты являются глобальными объектами, поскольку они существуют в глобальной области видимости. Если this используется в функции с аргументами, созданными с помощью new, this принадлежит этому объекту. В этом случае new создает новый объект и связывает this с функцией.

function foo(a) { 
   this.a = a;
} 
var bar= new foo(2);

NB: Область видимости - довольно обширная тема в JavaScript = ›call, apply и bind, методы функции предоставляют разные способы достижения привязки это.

В справочнике по JavaScript в веб-документации MDN есть 66 встроенных объектов. Один экспериментальный (AggregateError), два устаревших (escape () и unescape ()) и один не стандартизирован (uneval ()).

Три мушкетера

Однако три глобальных объекта, которые я считаю фундаментальными, и каждый новичок должен освоить их функциональность, - это Object, Function и Array. Они предоставляют функции, которые так важны, повсеместны и распространены в наших повседневных задачах программирования.

Object: - это один из классов типов данных JavaScript, который находится наверху прототипного наследования, и почти все другие объекты наследуются от него, за исключением null, который является концом цепочки прототипов. Это означает, что прототип Object имеет значение null. У Null нет прототипа.

Другие типы данных включают String, Symbol, Number, Null, Undefined и Boolean. В последнем стандарте ECMAScript (JavaScript) есть 9 типов данных. Null также является примитивным типом.

У объекта есть так много методов для управления его свойствами. Когда мы создаем объект, они наследуют свойство прототипа либо от функции, либо от объекта, прототип которого был назначен или не определен, если это просто объект.

Ниже приведены различные способы привязки объекта к прототипу.

/*Prototype is assigned by default when an object is created with new from a function because Function has prototype object by definition*/
function protofoo(){}
var protofoo1 = new protofoo();
console.log(protofoo.prototype.toString()); //[object Object]
/*When we create an ordinary object without new, ie explicitly from a function, it doesn't have prototype but it has an empty __proto__ which can be assigned a prototype.*/
var foo={
  check: 10
};
console.log(foo.__proto__); // empty ---> (1)
console.log(bar.prototype); //  TypeError ---> (2)
foo.__proto__ = protofoo1; // assigned
console.log(foo.__proto__); //protofoo
// we can create `bar` and link it to `foo`
// We can use Object.create to link an object explicitly.
var bar = Object.create( foo );
bar.fooprops= "We checking prototypes";
console.log(bar.__proto__); // "foo"
console.log(bar.fooprops); // "We checking prototypes"
console.log(bar.check); // 10 is delegated to `foo`
var zeus = Object.create( null );
console.log(zeus.__proto__); // "undefined"
zeus.__proto__ = protofoo;
console.log(zeus.__proto__); //protofoo
Object.setPrototypeOf(zeus, protofoo1)
console.log(zeus.__proto__); //protofoo

Мы можем переопределить это наследование, создав объект с нулевым значением Object.create (null). Мы также можем изменить прототип, установив прототип созданного объекта на какой-либо другой объект, напрямую используя свойство Object.setPrototypeOf или __proto__.

Функция: дает нам объект функции и может быть создан двумя способами. По объявлениям функций или конструктору. Разница в том, что функции, объявленные с помощью конструкторов, не имеют доступа к локальной охватывающей области видимости, а имеют доступ только к своим локальным переменным и глобальным переменным области видимости. Функции имеют только два утвержденных свойства - имя и длину (количество параметров), два из которых были обесценены, а одно не стандартизировано.

Для доступа к параметрам функции мы можем напрямую использовать объект arguments, который формально был свойством функции. Это первоклассные объекты. Выше мы видели множество функций.

Массив: представляет собой объект и базовую структуру данных, используемую для хранения группы примитивов или объектов. Он присутствует почти во всех языках программирования, индексируется и обычно имеет фиксированную длину, но, в отличие от других языков, массивы в JavaScript не фиксированы, а похожи на списки. В нем есть несколько методов, вероятно, больше, чем в большинстве языков программирования высокого уровня.

Используя метод массива push (), можно добавить элемент и увеличить его размер. Pop () удалит и уменьшит размер. У него есть несколько других методов, таких как indexOf, find и те, которые могут управлять массивом, например slice, shift, join, every, reduce, filter, map. Существует 38 методов, и 37 методов доступны для использования, но не рекомендуется использовать toSource (), поскольку это может быть устаревшим. Прочтите документацию по WEB API.

Эти и многие другие объекты в JavaScript, который является основным языком программирования, используемым для управления клиентской частью сети, в частности, WEB API, программными интерфейсами сети.

О WEB API

WEB API предоставляет программный интерфейс для написания кода для Интернета в наших веб-приложениях или на веб-сайтах с использованием JavaScript. Доступно 68 API. Всего 956 интерфейсов (типов объектов в этих API); некоторые из них устарели, некоторые все еще проходят тестирование, некоторые не стандартизированы, но более 600 стандартизированы, не являются устаревшими или проходят тестирование и могут быть использованы. Самым популярным из них является модель DOM (как это написано в MDN), которая представляет структуру документа на веб-странице. Другой - консольный API, который дает нам console.log (что-то). У нас есть API-интерфейс fetch для выполнения запросов и получения ответа. И многое другое. Проверь их.

Заключение

Из-за того, что на него свысока смотрели как на «игрушечный язык» в технологической экосистеме, язык только для браузера, он штурмом захватил мир программирования и перешел со стороны клиента на сторону сервера, и мы можем создавать полные веб-приложения с помощью JavaScript. Благодаря возможности создавать сложные пользовательские интерфейсы с использованием таких библиотек, как JQuery, Bootstrap, Material UI, React, и фреймворков, таких как Angular и Vuejs, которые могут создавать фантастические пользовательские интерфейсы, которые более функциональны, чем автономные приложения, которые в прошлом были возможны только на настольных компьютерах. GUI, мы живем в эру JavaScript.

JavaScript широк и безумен. Он превратился в первоклассный язык программирования для мобильных, клиентских и серверных приложений. Он приносит шестизначный доход и стал языком номер 1 в мире в 2020 году, и ему есть что выучить и освоить.

Посетите Bit.dev », центр облачных компонентов для интерфейсных команд.

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

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

Это отличный способ максимально увеличить повторное использование кода, ускорить разработку и совместно работать над компонентами из репозиториев.

Bit.dev поддерживает React, React with TS, React Native, Vue, Angular и многие другие.