Добро пожаловать в серию "Углубленная суть". В этой серии Blue поможет вам изучить суть кода, получить представление о мыслях и намерениях автора, скрытых за кодом, и ощутить красоту гениальной концепции и дизайна. под сущностью

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

——Синий

Temporal Dead Zone (или TDZ) возможно и слышали раньше, но Blue не знает, как другие себя чувствуют.Когда я первый раз увидел, ощущение было - "Кто придумал такое дерьмовое название?", что тоже правда Не могу меня винить, имя в моих глазах такое же, как "Большая мечта полна всевозможных вещей"Почти типа, то эта статья вам поможетГлубокое понимание временных мертвых зон, и изучите лежащие в его основе принципы, добро пожаловатьЛайк, избранное, комментарий, ретвит

В этой статье мы рассмотрим следующие

• Понимание объявления переменных JavaScript и области видимости
• Что такое временная мертвая зона
• Чем отличаются временные мертвые зоны для разных переменных
• В суть: зачем JS разработал механизм TDZ и как он работает

Статьи по Теме

• В этой статье используются некоторые из неопределенных знаний, упомянутых выше. Если вам это нужно, пожалуйста, ознакомьтесь с ними.

  (Связь)

Переменная

Переменные — это самая основная и основная функция всех языков.Можно даже сказать, что все остальные грамматики существуют для манипулирования переменными.Данные — это все, все — это данные, а в js у нас есть три способа объявить переменные

//最古老的变量声明方式
var name='blue';

//ES6添加的两种声明方式
let url='www.zhinengshe.com';
const age=18;

Три способа объявить

Для того, чтобы лучше понять ТДЗ, кратко напомню различия между ними:

Обратите внимание, что все три из них могут быть переданы черезbabelЛегко совместим со всеми браузерами, поэтому совместимость не учитывается для нас

• var: самый старый и традиционный способ объявления переменных, ничего особенного (ноЕго механизм является самым особенным, будет описано ниже)
• let: добавлено в ES6, предотвращает дублирование имен, с областью действия на уровне блоков, с временной мертвой зоной TDZ.
• const: Добавлено в ES6, предотвращает дублирование имен, с областью действия на уровне блоков, с временной мертвой зоной TDZ, константы не могут быть изменены.

просто попробуйте

var является самым старым и наиболее распространенным

var a=12;
var a=5;  //不会报错，var允许重复声明


if(true){
  var b=44;
}
alert(b);  //44，能出来，var没有块级作用域（是函数级的）

let не допускает повторяющихся объявлений и имеет блочную область видимости

let a=12;
let a=5; //报错，不允许重复声明


if(true){
  let b=44;
}
alert(b); //报错，b是块级变量，只能在if中使用

const в основном то же самое, что и let, за исключением того, что это константа

let a=12;
a=5; //可以再次赋值


const b=12;
b=5; //报错：常量，不可修改

const c; //报错：常量不可修改，所以必须拥有初始值

объем

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

три прицела

Обычно в js есть три области видимости:

• Глобальная область: объявлена ​​на самом внешнем уровне и может использоваться любым кодом.
• Локальная область видимости: объявлена ​​в функции, может использоваться только в этой функции (и ее подфункциях).
• Область действия на уровне блока: объявлена ​​в синтаксическом блоке (if, for, while и т. д.), может использоваться только внутри этого синтаксического блока.

просто попробуйте

//全局变量——声明在所有函数之外
var g1=12; //非严格模式下，全局var其实是window的属性
let g2=55;
const g3=23;


//局部变量——声明在函数当中
function show(){
  var l1='blue';
  let l2='zhangsan';
  const l3='lisi';
}
show();


//块级变量
if(true){
  var s1=18; //还是全局的，var不具备块级作用域
  let s2=29;
  const s3=30;
}
console.log(s1); //18
console.log(s2); //报错，找不到s2
console.log(s3); //报错，找不到s3

Что такое временная мертвая зона и в чем ее сущность?

Временная мертвая зона (𝓣𝓮𝓶𝓹𝓸𝓻𝓪𝓵 𝓓𝓮𝓪𝓭 𝓩𝓸𝓷𝓮) — это своего рода. . . Есть ли у этого шрифта внутренний вкус?

Ладно, не будем заморачиваться, я уже говорил о переменных и скоупах, какое это имеет отношение к временной мертвой зоне? Проще говоря,Переменные должны быть объявлены перед использованиемЭто правильно и правильно, тогда, если я этого не сделаю, я буду использовать синий сегодня, прежде чем объявить его, что мне делать?В это время будет запущен TDZ, чтобы сохранить сцену.

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

Просто посмотрите на пример

(()=>{
  //作用域开始
  
  
  /* 这一段是a的死区，也就是说用了a就会死 */
  
  
  //a真正声明
  let a=12;
})();

Так что, если я использую его?

(()=>{
  //作用域开始
  
  
  console.log(a);  //我今天就用了，怎么滴吧
  
  
  //a真正声明
  let a=12;
})();

Отлично. . . я не прав

Области, где переменные запрещены

Из вышеприведенного примера мы знаем, что переменные нельзя использовать до их объявления.Если они будут использованы, то программа умрет (сообщается об ошибке).Это временная мертвая зона, но так ли все просто? посмотрите на несколько вопросов.

Вопрос 1 - Есть ли у вар тдз

Как мы упоминали ранее, у var на самом деле нет tdz, так что произойдет, если я использую var заранее?

(function (){
  //作用域开始
  
  console.log(a); //不会死，只是undefined
  
  //真正声明变量
  var a=12;
})();

То есть, если js (то есть переменная var) до ES6 используется заранее, он получит толькоundefined; в то время как ES6 (let и const) используются заранее, это напрямую вызоветReferenceErrorошибка выполнения, но почему? В итоге что случилось?

Природа переменного подъема

Вышеупомянутая проблема связана с принципом работы js.Хотя js является интерпретируемым языком, есть также预编译Этап, на этом этапе исходный код js будет скомпилирован вjs字节码(Да, это очень похоже на механизм байт-кода класса java), тогда что он делает на этапе пре-компиляции?

На этапе прекомпиляции js все переменные будут просканированы и для них заранее выделено место в памяти, этот процесс называетсяПеременный подъем, проще говоря — как эффект выведения переменной в начало области видимости

//你眼中的代码
function show(){
  console.log(a);
  
  var a=12;
  var b=5;
  
  console.log(b);
}



//经过预编译后的代码
function show(){
  var a,b; //所有变量都被提升到作用域顶部，当然，这时仅有声明而无赋值，这也是为什么他们是undefined
  
  console.log(a); //undefined
  
  a=12;
  b=5;
  
  console.log(b); //5，因为已经赋值
}

Суть временной мертвой зоны ТДЗ

а такжеletа такжеconstОн немного другой, они тоже будут продвигаться (на самом деле так называемое продвижение заключается в записи ваших переменных), и они будут не инициализированы в undefined, а помечены какuninitializationсостояние, и это состояние временное, и это состояние будет снято при запуске объявленного кода (временныймертвая зона)

//你眼中的代码
function show(){
  console.log(a);
  
  let a=12; //跟上面的例子不同，我们用了let
  let b=5;
  
  console.log(b);
}



//预编译后的代码
function show(){
  //注意，这里仅为便于理解，uninitialization并不是js能使用的，只在引擎内部存在
  let a=uninitialization,
      b=uninitialization;
  
  console.log(a); //报错，因为uninitialization不可使用，碰了就死
  
  a=12;
  b=5;
  
  console.log(b); //这里没事，因为b从uninitialization变成5了
}

На этом примере мы понимаем,Временная мертвая зона — это, по сути, особое состояние, которое помечается как «непригодное для использования».

Затем некоторые ученики могут сказать: «Учитель, если я не назначу ему значение, это все равно останется неинициализацией?», нет.

//你眼中的代码
function show(){
  console.log(a);
  
  let a;
  
  console.log(a);
}


//预编译后的代码
function show(){
  let a=uninitialization;
  
  console.log(a);
  
  a=undefined; //任何未被初始化的变量，js会自动的赋值为undefined
  
  console.log(a);
}

Вопрос 2 - Что произойдет, если вы проткнете свой щит копьем?

Почему я чувствую себя второкурсником, когда пишу эту статью?

• В предыдущей статье мы упомянули очень мощную вещь — typeof, которую можно безошибочно использовать для неопределенных переменных.
• А в этой статье мы говорили, что тдз умрет если тронуть

Итак, вопрос в том, что если мы используем typeof для работы с tdz?

(()=>{
  //TDZ开始
  
  
  //你猜怎么着？
  console.log(typeof a); //处于tdz的变量
  console.log(typeof b); //真没声明的变量
  
  
  //TDZ结束
  let a=12;
})();

Так все это видят,TDZ выше, чем typeof, это нормально.Как правило, новый стандарт имеет более высокий приоритет, чем старый стандарт, иначе он будет заблокирован.

Смотри в суть: что такое ТДЗ и зачем он существует

В первую очередь это касается самого js, т.к.js — интерпретируемый язык, то есть у него нет жесткой фазы компиляции, что вообще не является проблемой в других языках (таких как Java)

public class Test{
  static void main(String args[]){
    System.out.println(a);  //"妄图"在声明前使用变量时

    int a=28;
  }
}

(Брат, я ошибался.jpg)

помощь

На самом деле, когда JavaScript предварительно скомпилирован, вполне возможноlet,constа такжеvarЭквивалентно, оба инициализируются какundefined, что проще для самого языка, зачем он это делает

• Соображения надежности: во-первых, мы используем переменную до ее объявления, верно? абсолютно нет, так чтоundefinedЭто кажется слишком нежным, нам нужно использовать более жесткий метод, чтобы помочь нам выяснить эту проблему.
• Простота отладки: как упоминалось выше, js на самом деле помогает нам находить такие низкоуровневые ошибки, чтобы облегчить нам отладку кода, поэтому даже typeof не может выполнять TDZ — typeof также является своего рода использованием, с грамматически неправильно

инструмент

Как было сказано ранее, JS — это интерпретируемый язык, поэтому он должен осуществлять продвижение переменных на этапе прекомпиляции (иначе он не может проверить наличие ошибок типа дублирующихся объявлений), поэтому TDZ не совсем для наших разработчиков, он во время компиляции, Также помогает компилятору искать возможные ошибки (повторяющиеся объявления переменных).

varОшибка, допускавшая дублирование объявлений, была исправлена ​​с помощью TDZ, одного из ее вкладов.

Когда использовали ТДЗ?

Как язык языка, вы никогда не будете принимать инициативу, его ценность заключается в том, чтобы помочь вам найти проблему (она используется перед декларацией); разработчик самого языка, он может помочь определить проблемы синтаксиса, такие как повторяющиеся декларации, Но только это больше, больше нет приложения

Суммировать

Пришло время разобраться в том, что сказала Блю, так что сначала

• Сверху области до места, где объявлена ​​переменная, находится мертвая зона переменной, потому что она временная, т. н.Временная мертвая зона
• Переменная поднимается в верхнюю часть области видимости
• varОдновременное назначение переменного подъемаundefined
• letа такжеconstзатем помечается как неинициализация (состояние TDZ)
• Переменные TDZ в любом случае нельзя трогать, и они умрут при прикосновении (даже typeof не может этого сделать)

Есть ошибка? Хотите добавить?

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