Javascript — С большой силой приходит большая ответственность
Сначала некоторые основные вещи
Javascript — это свободно типизированный язык, который JIT (Just-In-Time) скомпилирован с помощью JS Engine, такого как Chromes V8. Это означает, что мы не указываем тип переменной до тех пор, пока не ИНИЦИАЛИЗИРУЕМ переменную.
Если вы больше изучаете javascript, интерпретацию и компиляцию, вы, вероятно, встречали термин «подъем» (а может и нет). Как вы можете видеть на обложке выше, перед выполнением кода все объявления перемещаются в верхнюю часть области видимости (в данном случае области действия функции). Но позвольте мне рассказать вам, почему это не просто странное поведение что вызывает большой потенциал побочные эффектыно при правильном использовании может быть очень мощным.
Почему это плохо?
Ну, во-первых, самая очевидная причина, по которой это плохо, заключается в том, что человеку, пытающемуся причина о кодирование, а также свободная типизация приводят к всевозможным неверным толкованиям со стороны разработчика.
Менее очевидными, но еще более болезненными для устранения неполадок являются побочные эффекты, которые могут возникнуть из-за области видимости функции или приведения типа. В JS вы могли видеть подобные вещи раньше:
true + true // -> 2
true - true // -> false
typeof Number // -> NaN (Not a Number)
Большинство разработчиков, пришедших из типизированных языков программирования, привыкли к концепциям области действия блока и имеют строгую проверку компилятором любых ошибок типа во время компиляции. Поскольку Javascript скомпилирован JIT, эти ошибки появляются во время выполнения и могут сильно разочаровать конечного пользователя.
Есть собственные реализации, такие как позволять и константа которые объявляют переменные в области блока, а также такие фреймворки, как машинопись которые добавляют шаг предварительной компиляции к вашему javascript и реализуют более контролируемую версию ввода.
Почему это также очень круто
Это становится по-настоящему крутым, когда мы знакомимся с концепцией замыкания. Если функции заключены друг в друга, они также содержат ссылку на лексическое окружение (состояние «вокруг» них). Другими словами:
закрытие дает вам доступ к области внешних функций из внутренней функции
Наряду со свободной типизацией вы можете реализовать полиморфизм более выразительным способом. Однако сложность управления этим растет с размером вашего приложения.
Вот пример использования прототипного наследования с замыканием:
//prototype on Window
Window.prototype.handleResize = function(resizer, tick){
var worker = { isWorking: false, listeners: []};
this.addEventListener('resize', function(event){
if(worker.isWorking) return null;
worker.isWorking = true;
setTimeout(function(){
worker.listeners.forEach(function(listener){ listener(resizer(event)); })
worker.isWorking = false;
}.bind(this), tick || 100);
}.bind(this));
return {
dispatchTo: function(func){
var index = worker.listeners.push(func) - 1;
return function(){
worker.listeners.splice(index, 1)
}
}
}
};
Здесь я представляю способ выполнения различных действий при изменении размера окна:
var getWidth = function(e){ return e.target.innerWidth; }
var resizeWidth = window.handleResize(getWidth) //(default: only perform every 100 ms) -> due to performance
и отправка этого события обработчику:
var logWidth = function(width){
console.log("my new width is: " + width);
}
var listener = resizeWidth.dispatchTo(logWidth)
Когда мы изменяем размер окна, мы будем транслировать событие, которое выводит ширину, которая затем будет регистрироваться каждые 100 мс (параметр галочки), чтобы избежать загромождения (устранение дребезга). Мы достигаем высокой степени выразительности в реализации.
Ключевые вынос
С большой силой приходит и большая ответственность: будьте ответственны при написании кода и следите за неприятными побочными эффектами. Приучите себя к таким понятиям, как неизменность, и овладейте возможностями, заключенными в javascript.
