>  기사  >  웹 프론트엔드  >  JavaScript 주제 1: 변수 승격 및 사전 컴파일

JavaScript 주제 1: 변수 승격 및 사전 컴파일

coldplay.xixi
coldplay.xixi앞으로
2021-03-02 09:42:421817검색

JavaScript 주제 1: 변수 승격 및 사전 컴파일

목차

  • 머리말
  • 1. Js 사전 분석
  • 3. ES6
  • 마지막에 작성
  • (관련 무료 학습 권장사항:

    javascript 비디오 튜토리얼
  • )

머리말

이 기사는 "JavaScript 전문 고급 시리즈"의 첫 번째 기사입니다. 예를 들면 다음과 같습니다. 방지 제한평탄화

깊고 얕은 복사

    배열 중복 제거
  • sorting
  • ...
  • 및 기타 고전적인 특수 지식 포인트. 구글 콘텐츠 검색자가 되지 않기 위해 여러 경우에 '출현율'이 높다고 해서
  • Specialized Advanced
  • 라는 이름이 붙었습니다. ! !
  • 여기에 사진 설명 삽입

1. 흥미로운 현상 google内容搜索师,《JavaScript专项进阶系列》诞生了!!!

JavaScript 주제 1: 변수 승격 및 사전 컴파일

一、有趣的现象

按照大家的常识,JavaScript代码在执行是一定是自上而下的,你需要输出一个字符串,当然需要提前声明一个保存string类型的变量。如果深奥的道理我都能懂,于是我阅读了下面的代码。

1.1 我以为的开局
var str = '123';console.log(str); // 123

我们调换一下代码的位置在再看:

console.log(str); // undefinedvar str = '123';

我好像找到规律了!!!

当我看完了前两段代码并且进行了“深度思考”后,我好像找到规律了,那就是:在当前代码块后函数中,在变量声明和初始化之前使用变量,会拿不到正确的值。

JavaScript 주제 1: 변수 승격 및 사전 컴파일

1.2 实际上是这样的

带着上面的“结论”我来到了这里

var val = '余光';(function(){
    console.log(val); // 余光})();

果然如此!,在变量声明和初始化之后耶稣也阻挡不了我拿到val的值,我说的!!!

当我看到下面一段代码时,我已经产生了动摇,此事必要蹊跷。

var val = '余光';(function(){
    console.log(val); // undefined
    var val = '测试';})();

Ps:如果大家立即执行函数存在疑问,不妨看看《JavaScript之深入理解立即调用函数表达式(IIFE)》吧~

这…我怂了,是什么原因导致这样的现象发生的呢?Js又是如果处理的呢?

JavaScript 주제 1: 변수 승격 및 사전 컴파일

二、Js的预解析

在当前的作用域内,无论在哪里变量声明,在幕后,都会进行一次看不见的移动。

注意:仅声明被“移动”。即声明和赋值在某些时候被动分开了。而这次看不见的移动实际上就是Js在编译阶段的解析

来看一段《你知不知道的Js》中经典的例子:

name = '余光'; // 未添加关键字(未声明),name为全局变量,,即window.name = '余光'var name; // 再次声明name,此时name未进行初始化,它的值是undefined吗?console.log(name); // ?

结果是成功打印“余光”,这样看不见的移动就发生在Js预解析(编译)之中。

2.1 核心:预解析

为了搞明白这个核心问题,我们需要回顾一下,引擎会在解释JavaScript代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明,并用合适的作用域将它们关联起来。感兴趣的小伙伴可以阅读《JavaScript中的变量对象》和《从作用域到作用域链》这两篇文章哦~

因此,发生这样的事情,包括变量函数在内的所有声明都会在任何代码被执行前首先被处理。当你看到var a = 2;时,可能会认为这是一个声明。但JavaScript实际上会将其看成两个声明:var a;和a = 2;。

  • 第一个定义声明是在编译阶段进行的。
  • 第二个赋值声明会被留在原地等待执行阶段。

即代码是这样写的:

// 我们看到的代码:var name = '余光';

但Js会将它解析成:

// 声明(Declaration)var name; // 声明但未初始化,所以分配 undefined// 初始化(Initialization)name = '余光'; // 初始化(赋值)

所以本小结的一段代码应该这样分析:

var name; // 声明name提到作用域顶部,并被分配了一个undefinedname = '余光'; // 进行初始化操作console.log(name); // '余光'
2.2 注意:只有声明被提升了

只有声明会被提升,而赋值和其他代码逻辑会在执行到代码的位置时才会生效。所以会有下面的问题:

foo();function foo(){
    console.log(name); // undefined
    var name = '余光';}

函数被提升了,自然可以正常执行,但变量仅仅是声明被提升了。

2.3 每个作用域都会进行提升操作

还是上面的代码:

foo();function foo(){
    console.log(name); // undefined
    var name = '余光';}

实际它在编译时是这样的:

function foo(){
    var name; // 声明
    console.log(name); // undefined
    name = '余光'; // 初始化}foo(); // 函数执行

JavaScript 주제 1: 변수 승격 및 사전 컴파일

三、提升之间的优先级

既然我们知道了变量函数상식적으로 자바스크립트 코드는 위에서 아래로 실행되어야 합니다. 문자열을 출력해야 한다면 당연히 문자열 형식을 저장할 변수를 미리 선언해 주어야 합니다. 심오한 진실을 이해할 수 있다면 다음 코드를 읽어보세요.

1.1 제가 생각한 오프닝
foo();var foo; // 1function foo(){
    console.log('余光');}foo = function(){
    console.log('小李');}
🎜코드 위치를 바꿔서 다시 살펴보겠습니다.🎜
function foo(){
    console.log('余光');}foo(); // 余光foo = function(){
    console.log('小李');}
🎜🎜패턴을 찾은 것 같아요!!!🎜🎜🎜읽고 나면 처음 두 부분의 코드를 실행하고 "깊이 생각"한 후에 규칙을 찾은 것 같습니다. 즉, 현재 코드 블록 뒤의 함수에서 변수가 변수 선언 및 초기화 전에 사용되는 경우 code>의 경우 올바른 값을 얻을 수 없습니다. 🎜<p style="text-align:center;"><img style="max-width:90%" src="https://img.php.cn/upload/article/000/000/052/5927798594a2787b114f9890e63f684a-1.jpg%20" alt="JavaScript 주제 1: 변수 승격 및 사전 컴파일" >🎜</p> <h5>1.2 이것이 사실이다</h5>🎜위의 "결론"을 가지고 왔습니다🎜<pre class="brush:php;toolbar:false">foo();var foo = function(){     console.log(1);}// TypeError: foo is not a function</pre>🎜정말 그렇습니다! , 🎜 변수 선언 및 초기화 🎜 후에 예수님은 제가 val 값을 얻는 것을 막을 수 없다고 말씀드렸습니다! ! ! 🎜🎜다음 코드를 봤을 때 뭔가 의심스러운 점이 있을 것 같았습니다. 🎜<pre class="brush:php;toolbar:false">// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;</pre>🎜Ps: 함수 즉시 실행에 대해 궁금한 점이 있으면 "JavaScript의 즉시 호출 함수 표현식(IIFE)에 대한 심층적 이해"를 살펴보는 것도 좋습니다~🎜🎜이건... 무서워요 뭐 이 현상이 발생하는 이유는 무엇입니까? Js는 이를 어떻게 처리하나요? 🎜<p style="text-align:center;"><img style="max-width:90%" src="https://img.php.cn/upload/article/000/000/052/5927798594a2787b114f9890e63f684a-2.jpg%20" alt="JavaScript 주제 1: 변수 승격 및 사전 컴파일" >🎜🎜🎜2. Js 사전 구문 분석🎜🎜🎜현재 범위에서는 변수가 선언된 위치에 관계없이 보이지 않는 움직임이 뒤에서 발생합니다. 🎜🎜참고: 🎜"이동됨"🎜만 선언합니다. 즉, 선언과 할당은 어느 시점에서 수동적으로 분리됩니다. 그리고 이 보이지 않는 움직임은 실제로 <code>컴파일 단계 중 Js를 구문 분석하는 것입니다. 🎜🎜"Do You Know JS"의 전형적인 예를 살펴보겠습니다. 🎜rrreee🎜 결과적으로 "주변광"이 성공적으로 인쇄되어 Js 사전 구문 분석(컴파일) 중에 🎜보이지 않는 움직임🎜이 발생합니다. 🎜

2.1 핵심: 사전 구문 분석
🎜 이 핵심 문제를 이해하려면 엔진이 JavaScript 코드를 해석하기 전에 먼저 컴파일한다는 점을 검토해야 합니다. 컴파일 단계의 일부는 모든 선언을 찾아 적절한 범위와 연결하는 것입니다. 관심있는 친구들은 "JavaScript의 변수 객체"와 "범위에서 범위 체인으로" 두 기사를 읽어보세요~ 🎜🎜 따라서 이런 일이 발생하면 변수 및 함수는 코드가 실행되기 전에 먼저 처리됩니다. var a = 2;를 보면 이것이 문장이라고 생각할 수도 있습니다. 그러나 JavaScript는 실제로 이를 var a; 및 a = 2;라는 두 가지 선언으로 간주합니다. 🎜🎜🎜첫 번째 정의문은 컴파일 단계에서 작성됩니다. 🎜🎜두 번째 할당문은 실행 단계를 기다리며 그대로 유지됩니다. 🎜🎜🎜즉, 코드는 다음과 같이 작성됩니다:🎜rrreee🎜하지만 Js는 이를 다음과 같이 구문 분석합니다.🎜rrreee🎜따라서 이 요약의 코드 조각은 다음과 같이 분석되어야 합니다:🎜rrreee
2.2 참고: 문이 승격됩니다.
🎜🎜선언만 승격되고 할당 및 기타 코드 논리는 코드가 실행될 때만 적용됩니다🎜. 그러면 다음과 같은 문제가 발생하게 됩니다. 🎜rrreee🎜 함수는 승격되어 자연스럽게 정상적으로 실행이 가능하지만, 변수는 승격되도록 선언만 되어 있습니다. 🎜
2.3 각 범위가 승격됩니다.
🎜그래도 위 코드는:🎜rrreee🎜실제로 컴파일하면 다음과 같습니다:🎜rrreee

JavaScript 주제 1: 변수 승격 및 사전 컴파일🎜🎜🎜3 프로모션 간 우선순위🎜🎜🎜이제요. 변수함수가 승격된다는 것을 알고 있는데, 이들 사이의 우선순위를 어떻게 결정합니까? 🎜

3.1 函数会被首先提升,然后才是变量

我们分析下面的代码:

foo();var foo; // 1function foo(){
    console.log('余光');}foo = function(){
    console.log('小李');}

本着函数优先提升的原则,他会被解析成这样:

function foo(){
    console.log('余光');}foo(); // 余光foo = function(){
    console.log('小李');}

注意,var foo 因为是一个重复声明,且优先级低于函数声明所以它被忽略掉了。

3.2 函数字面量不会进行函数提升

最直观的例子,就是在函数字面量前调用该函数:

foo();var foo = function(){
    console.log(1);}// TypeError: foo is not a function

这段程序中:

  1. 变量标识符foo被提升并分配给所在作用域(在这里是全局作用域),因此在执行foo()时不会导致ReferenceError(),而是会提示你 foo is not a function
  2. 然后就是执行foo,foo此时并没有赋值(注意变量被提升了)。由于对undefined值进行函数调用而导致非法操作,因此抛出TypeError异常。

四、ES6和小结

ES6新增了两个命令letconst,用来声明变量,有关它们完整的概念我会在《ES6基础系列》中总结,提起它们,是因为变量提升在它们身上不会存在

4.1 变量提升是可以规避的

let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;

上面代码中,变量foo用var命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量bar用let命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。

在变量提升上,const和let一样,只在声明所在的块级作用域内有效,也不会变量提升

4.2 小结
  1. 变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部,但变量的初始化不会提升;
  2. 函数提升:函数声明可以被看作是函数的整体被提升到了代码的顶部,但函数字面量表达式并不会引发函数提升;
  3. 函数提升优先与变量提升;
  4. let和const可以有效的规避变量提升

最后提炼一下:JavaScript引擎并不总是按照代码的顺序来进行解析。在编译阶段,无论作用域中的声明出现在什么地方,都将在代码本身被执行前首先进行处理,这个过程被称为提升。声明本身会被提升,而包括函数表达式的赋值在内的赋值操作并不会提升。

相关免费学习推荐:javascript(视频)

위 내용은 JavaScript 주제 1: 변수 승격 및 사전 컴파일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제