Только верхушка айсберга ❄️
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 Nodeconsole.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 💌
- Повторное введение в JavaScript
- Цикл событий
- Срочное или частичное применение
- Все о функциях JavaScript
- Функциональное программирование на JS
- Класс и прототипное наследование
Вы также можете подписаться на этот действительно интересный канал Y ouTube, чтобы найти интересные материалы, связанные с JS, и многое другое.
Я буду продолжать добавлять к этому списку еще больше, поскольку я прохожу это невероятное приключение, пытаясь понять этот мощный, но таинственный ландшафт JavaScript.
Пожалуйста, если статья вам понравилась. Спасибо за ваше время. 🙏