Только верхушка айсберга ❄️

JavaScript меня позабавил с тех пор, как я увидел, что можно делать с его помощью, и с какой легкостью мы можем этого достичь. Уже почти полтора года работаю с React JS и Node JS. Излишне говорить, что я большой фанат React.

Недавно я начал понимать, что на самом деле происходит под капотом и за всеми этими уровнями абстракции, представленными нам как разработчикам. Это открытие заставило вернуться к основам и подробно разобраться в работе JavaScript 😲

Каждый раз, когда я оглядываюсь на всю работу, которую я проделал с JS, не зная толком ничего о его внутренней работе, меня это действительно забавляет. Пожалуйста, примите это как оду сообществу JavaScript. Вы, ребята, потрясающие 🙌

Примечание. В этой статье я надеюсь осветить введение в JS и 4 темы / функции , которые заинтриговали меня в JavaScript и заставили меня заядлый читатель MDN Web Docs и других статей, связанных с JS. Он будет полезен тем, кто только начинает работать с JS, или послужит напоминанием для опытных.

Надеюсь, вы тоже вдохновитесь разобраться в этом загадочном мире JavaScript 🌎 (или просто узнаете что-то новое 😉).

Вот небольшое введение в JS от моего личного фаворита.

1. JavaScript известен как самый непонятый язык программирования в мире.

2. Его часто высмеивают как игрушку, но за ее обманчивой простотой скрываются мощные языковые функции await. (Асинхронный каламбур, а? 😜)

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

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

Хост-среда обычно представляет собой браузер.

Интерпретаторы JavaScript также можно найти в огромном списке других мест, включая Adobe Photoshop, изображения SVG, серверные среды, такие как Node.js, базы данных NoSQL, такие как Apache CouchDB с открытым исходным кодом, встроенные компьютеры, полные среды рабочего стола, такие как GNOME (один наиболее популярных графических интерфейсов для операционных систем GNU / Linux) и т. д.

JavaScript - это многопарадигмальный динамический язык с типами и операторами, стандартными встроенными объектами и методами. Его синтаксис основан на языках Java и C - многие структуры этих языков применимы и к JavaScript.

Я также порекомендую вам несколько статей, если вы хотите узнать больше. Это могут быть особенности ES6 или его предшественников.

Что с названием?

или, что такое ECMAScript?

JavaScript был создан в 1995 году Бренданом Эйхом (инженер Netscape). Первоначально он назывался Mocha и был изменен на LiveScript, но был переименован после маркетингового решения, в котором была сделана попытка извлечь выгоду из популярности языка Java в то время. .

Netscape представила JavaScript в ECMA (европейскую организацию по стандартизации), в результате чего в том же году была выпущена первая редакция стандарта ECMAScript.

Стандарт получил значительное обновление как ECMAScript edition 3 в 1999 году, и с тех пор он остается в значительной степени стабильным.

От четвертого издания отказались из-за политических разногласий относительно языковой сложности.

Многие части четвертого издания легли в основу ECMAScript edition 5, опубликованного в декабре 2009 года, и 6-го основного издания стандарта, опубликованного в июне 2015 года.

Итак, заключение, я считаю, что JavaScript считается языком, который реализует стандарт под названием ECMAScript.

JavaScript - это реализация стандарта, то есть ECMAScript.

Источники: A_re-Introduction_to_JavaScript, в чем разница между JavaScript и ECMAscript

Прототипное наследование и классы

Одна из самых интересных особенностей лично для меня

Что такое прототипное наследование, спросите вы?

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

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

Почти все объекты в JavaScript - это экземпляры Object, которые находятся на вершине цепочки прототипов.

Каждый объект в JS может иметь другой объект в качестве прототипа. Тогда первый объект наследует все свойства последнего.

Объект указывает свой прототип через внутреннее свойство [[Prototype]]. Цепочка объектов, связанных свойством [[Prototype]], называется цепочкой прототипов.

Свойство __proto__ раскрывает внутреннюю связь прототипа.

прототип против __proto__

prototype - это свойство функции-конструктора, которое устанавливает то, что станет свойством __proto__ созданного объекта.

var animal = {
  eats: true,
  walk() {
    console.log("walking!!");
  }
};

var rabbit = {
  jumps: true,
  __proto__: animal
};
var bugsBunny = {
    likesEating: 'Cartoon Carrots',
    isCartoon: true,
    __proto__: rabbit
};
bugsBunny.walk(); // walking!!! 
// resolved by going up the prototype chain to 'animal'
console.log(bugsBunny.jumps); // true
// resolved by going up the prototype chain to 'rabbit'

А теперь расскажите о классах?

Хорошо, теперь классы в JavaScript - это просто синтаксический сахар поверх прототипного наследования. 😅)

ES6 представил новый набор ключевых слов, реализующих классы. то есть class, constructor, static, extends и super

Я позволю вам взять его отсюда, чтобы узнать больше о курсах👆.

Источники: Классы, Наследование и прототипная цепочка.

Что это " ?

Спойлер: это всего лишь привязка

this ведет себя немного иначе в JavaScript по сравнению с другими языками. Также есть некоторые различия между строгим и нестрогим режимами в Javascript.

Значение this определяется способом вызова функции. Оно не может быть установлено путем присваивания во время выполнения, и оно может отличаться при каждом вызове функции.

Глобальный контекст:

В нестрогом режиме по умолчанию this указывает на глобальный объект окна в браузере, а в строгом режиме по умолчанию this равен undefined.

In browser
console.log(this === window); //true
In Node
console.log(this === global); //true
'use strict'
console.log(this); //undefined

Контекст функции:

Значение this остается таким, каким оно было установлено при входе в контекст выполнения.

Чтобы передать значение this из одного контекста в другой, используйте call или apply :

var obj1 = { a: 'Custom' };
var a = 'Global';
function whatIsA() {
   return this.a;
}
console.log(whatIsA()); //Global
console.log(whatIsA().call(obj1)); //Custom

Bind ():

ES5 представил новую функцию для Function.prototype, называемую bind ().

Вызов func.bind(someObject) создает новую функцию с тем же телом и областью действия, что и func, но там, где this встречается в исходной функции, в новой функции она навсегда привязана к первому аргументу bind

// function WhatIsA from the above example
var obj2 = { a: 'I'm Object 2’s a!' };
var whatIsAInObj2 = whatIsA.bind(obj2);
console.log(whatIsAInObj2()); // I'm Object 2’s a!

Функции стрелок:

С введением стрелочных функций this сохраняет значение this окружающего лексического контекста.

 var obj = {
             bar: function() {
                   var x = () => this;
                   return x;
               }
         };
var fn = obj.bar();
console.log(fn() === obj); // true

Я могу продолжать. Но, чтобы узнать больше об этом, загляните в Документы MDN. 😉

Прочтите о том, как на this привязку влияет только самая непосредственная ссылка на член.

Подъем ⬆️

Все выше и выше? (Поклонники Coldplay получат это 🎶)

Подъемник вошел в изображение или спецификацию только с ES6.

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

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

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

console.log(sayHello('world!')); // Hello world!
console.log(a); 
// undefined and not 'ReferenceError' due to hoisting 
console.log(sayOla('world!')); 
// TypeError: sayOla is not a function
function sayHello(param) {
   return 'Hello ' + param;
}
var a = 1;
var sayOla = function (param) {
   return 'Hello ' + param;
};

В приведенном выше примере показан подъемник в действии.

Концептуально то, как это видит ваше время выполнения.

function sayHello(param) {
   return 'Hello ' + param;
}
var a;
var sayOla;
console.log(sayHello('world!')); // Hello world!
console.log(a); 
// undefined and not 'ReferenceError' due to hoisting
console.log(sayOla('world!')); 
// TypeError: sayOla is not a function
a = 1;
sayOla = function (param) {
   return 'Hello ' + param;
};

Примечание: поднимаются только объявления, но не присваивания. также не поднимаются объявления классов.

Подробнее: Почему не поднимаются классы ES6

А теперь давайте подведем к «закрытию» 🔚

Еще один каламбур на JS 😉

Замыкание - это функция, объединенная (заключенная) со ссылками на ее окружающее состояние (лексическое окружение).

Замыкание дает вам доступ к области внешней функции из внутренней функции. В JavaScript замыкания создаются каждый раз, когда создается функция, во время создания функции.

function outerFunction() {
    var x = 'Hello ';
    return function (param) {
       return x + param;
    }
}
var newFunc = outerFunction();
console.log(newFunc('World!')); // Hello World!
// Even after returning the function has access to variable x

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

// partial application
function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
console.log(add5(10)); // 15

Подробнее: Практическое использование замыкания, замыкание

Надеюсь, эта статья вас вдохновила или захотела узнать больше о JavaScript.😄

PS: я просто оставлю вас с моими личными любимыми статьями / документами JS 💌

  1. Повторное введение в JavaScript
  2. Цикл событий
  3. Срочное или частичное применение
  4. Все о функциях JavaScript
  5. Функциональное программирование на JS
  6. Класс и прототипное наследование

Вы также можете подписаться на этот действительно интересный канал Y ouTube, чтобы найти интересные материалы, связанные с JS, и многое другое.

Я буду продолжать добавлять к этому списку еще больше, поскольку я прохожу это невероятное приключение, пытаясь понять этот мощный, но таинственный ландшафт JavaScript.

Пожалуйста, если статья вам понравилась. Спасибо за ваше время. 🙏