JavaScript의 범위에 대한 자세한 설명

소개

JavaScript는 풀스택 언어입니다. 특히 2016년에는 JavaScript가 세계를 지배할 것이라는 소문도 자주 듣습니다. 당시 iOS에서 TableView를 알면 취업이 가능했던 것처럼 2016년에도 Vue.js를 알면 취업이 가능하다고 합니다. (tableView는 안드로이드의 ListView와 동일하지만 현재는 기본적으로 RecyclerView를 사용하고 있습니다.)

2016 Facebook과 Alibaba의 Weex가 제작한 모바일 크로스 플랫폼 React Native, 핫 복구 기술인 JSPath, 백엔드 Node.js 등 인기 있는 프런트엔드 기술은 기본적으로 JavaScript와 관련되어 있습니다( 내가 매우 좋아하는 기술 스택) 어제 나중에 gibhub에 가서 살펴보았습니다. Vue의 별 수가 jQuery의 별 수를 초과했습니다. -최종 생각은 이전 문서 작업에서 데이터 중심 개발로 변경되었습니다(관심 있으신 경우). 나중에 Android, iOS, Vue를 결합하여 이러한 생각의 변화를 보여주기 위해 작은 데모를 사용할 수도 있습니다. EasyUI를 대체하기 위해 Ele.me에서 제작한 Element를 사용해 보세요(백엔드 작업을 해본 학생들은 EasyUI가 실제로 AV 페인팅 품질이라는 것을 알아야 합니다....)

JS 기술이 속속 등장하고 있습니다. 2016년에 JS를 배운다는 기사가 꽤 인기가 있었는데, 많은 사람들이 겁을 먹었죠. 프레임워크나 신기술에 관해서는 네이티브 JS가 빠졌기 때문에 꼭 짚고 넘어가고 싶습니다. 모든 사람과 기본 JS 문제 공유

---

JavaScript의 범위

다음은 간단한 질문입니다:

<script>
    var str1 = "hello";
    var str2 = "world";

    function t1() {
        console.log(str1);
        console.log(str2);

        var str2 = "toby";
        console.log(str2);
    }

    //这里会输出什么?
    t1();

</script>

이것은 매우 간단한 JS 범위 질문이지만 단순이라는 단어를 강조할수록 사람들이 경계심을 늦추기 쉬워지고 일부 학생들은 아무 생각 없이 대답하세요

● hello

● world

● toby

하지만 결과는 출력입니다

● hello

● 정의되지 않음

● 토비

그럼 이게 이상하네요 왜 정의되지 않은 것이 있을 텐데, 월드가 되어야 하지 않을까요? 우선 변수를 검색한다는 점을 이해해야 합니다. 근접성 원칙을 따르므로 js는 먼저 함수에서 검색한 다음 함수에 str2가 있지만 실행할 때 console.log(str2)에 도달하면 str2가 정의되지 않습니다. 그래서 정의되지 않음

---

어휘분석

알아야 할 점 왜, 그럼 몇 가지 예를 더 살펴보겠습니다

예제 1

<script>
    function t(userName) {
        console.log(userName);//这里输出什么?

        function userName() {
            console.log(&#39;tom&#39;);
        }
    }
    t(&#39;toby&#39;);
</script>

출력 결과 이 ​​예는 위와 다른 것 같습니다. 고등학교 수학으로 돌아가서 문제 유형이 바뀌면 헷갈릴 수도 있습니다. 이때 어떤 학생들은 토비라고 생각할 수도 있지만 실제 출력은

rree

입니다. 실제로는 이런 함수인가요? 범위 문제는 "공식 세트"를 통해 얻을 수 있습니다. 이 공식은 JS의 어휘 분석입니다. JS의 함수가 실행되기 전에 수행해야 하는 작업 중 하나가 어휘 분석입니다. 매개 변수, 변수 선언 분석, 함수 선언 분석을 수행한 다음 이 질문을 사용하여 수식을 적용해 보겠습니다.

t('toby')가 실행되면 두 단계가 시작됩니다. 하나는 분석 단계입니다. , 실행 단계로 들어갑니다

분석 단계:

● 함수가 실행되는 순간 Active Object 객체(이하 AO 객체)가 생성됩니다. 생성됨), 함수 범위에서 찾을 수 있는 모든 변수는 AO에 있습니다. 이때 코드는 다음과 같이 표현됩니다. t.AO = {}

● 분석 매개변수: 매개변수를 수신하고, 매개변수 이름을 다음과 같이 사용합니다. 속성, 매개변수 값은 속성 값입니다. 매개변수가 없으므로 분석 결과는 코드로 표현됩니다. t.AO = {userName : toby}

● var 문 분석: var 문이 없습니다. t 함수에서는 건너뛰기

● 분석 함수 선언: 이 함수 선언에는 특별한 기능이 있습니다. AO에 함수 이름과 동일한 이름의 속성이 있으면 이 함수로 덮어쓰게 됩니다. 함수도 JS 필드의 변수 유형이므로 코드에서는 다음과 같이 표현됩니다. t.AO = { userName : function userName() {console.log('tom');}}

실행 단계:

t('toby')를 실행합니다. console.log(userName)이 실행되면 t.AO.userName이 호출되므로 최종 출력 결과는 userName( ) {console.log('tom');}

예제 2

function userName() {
    console.log('tom');
}

그럼 여기서 출력된 내용은 위의 예와 다른 것 같은데, 또 혼란에 빠졌다고요? 겁내지 말고 잘 따라오세요 공식은 다시 과정을 거칩니다. >분석에 앞서 두 가지 개념을 먼저 이해해야 합니다. 하나는 함수 선언이고 다른 하나는 함수 표현입니다.

<script>
    function t(userName) {
        console.log(userName);//这里输出什么?

        var userName = function () {
            console.log(&#39;tom&#39;);
        }
    }
    t(&#39;toby&#39;);
</script>

분석 단계:

● AO 객체 생성, t.AO = {}

● 분석 매개변수: t.AO = {userName : toby}

● 分析var声明: 在AO上,形成一个属性,以var的变量名为属性名,值为undefined,(因为是先分析,后执行,这只是词法分析阶段,并不是执行阶段,分析阶段值都是undefined,如果执行阶段有赋值操作,那值会按照正常赋值改变),也就是说代码应该表示为:t.AO = {userName : undefined},但是还有另外一个原则,那就是如果AO有已经有同名属性,则不影响(也就是什么事都不做),由于分析参数时,AO上已经有userName这个属性了,所以按照这个原则,此时什么事都不做,也就是说,此时按照分析参数时的结果t.AO = {userName : toby}

● 分析函数声明: 此时没有函数声明,略过

执行阶段:

调用t.AO.userName,所以,最后的输出结果是toby

例子3

<script>
    t();
    t2();

    function t() {
        console.log(&#39;toby&#39;);//这里会输出什么?
    }

    var t2 = function () {
        console.log(&#39;hello toby&#39;);//这里会输出什么?
    };
</script>

那么我们再来看一个例子,这下彻底回到高中时代,做了两个例子好像感觉掌握了,结果考试你给来看这个?

答案是,t()输出为toby,t2()则会报错.这又是为什么?

● t()可以调用是因为在词法分析的过程,就已经完成了t函数的分析,所以可以调用

● t2()不能调用是因为在词法分析的阶段,分析到有一个t2声明,在AO上只是形成了一个属性,但是值为undefined

例子4

<script>
    function t(userName) {
        console.log(userName);//这里输出什么?
        function userName() {
            console.log(userName);//这里输出什么?
        }
        userName();
    }
    t(&#39;toby&#39;);
</script>

函数里面套函数,这次竟然又和前面不一样了...这次我不说答案了,直接先套公式走一波

t('toby')的分析和执行阶段

分析阶段:

● 创建AO对象,t.AO = {}

● 分析参数: t.AO = {userName : toby}

● 分析var声明: 有同名属性,不做任何事,还是t.AO = {userName : toby}

● 分析函数声明: 有同名属性,覆盖: t.AO = {userName : function userName() {console.log(userName);}}

执行阶段: t.AO.userName 输出为function userName() {console.log(userName);}}

userName()的分析和执行阶段

这里也要搞清楚两个概念

//执行userName()分析的是
function () {
  console.log(userName);
};

//而不是
var userName = function () {
    console.log(userName);
};

分析阶段:

● 创建AO对象,userName.AO = {}

● 分析参数: 无,略过

● 分析var声明: 无,略过

● 分析函数声明: 无,略过

执行阶段: 因为此时userName.AO = {}是个空对象,无法执行userName.AO.userName,所以会向上一层找,所以输出t.AO.userName的结果,也就是function userName() {console.log(userName);}}

例子5

<script>
    function t(userName) {
        console.log(userName);//这里输出什么?
        var userName = function () {
            console.log(userName);//这里输出什么?
        }
        userName();
    }
    t(&#39;toby&#39;);
</script>

好吧,我保证这个是最后一道...这个输出结果是什么呢?我们只要坚定公式没问题,就一定能得出结果,那么再套公式走一波

t('toby')的分析和执行阶段

分析阶段:

● 创建AO对象,t.AO = {}

● 分析参数: t.AO = {userName : toby}

● 分析var声明: 有同名属性,不做任何事,还是t.AO = {userName : toby}

● 分析函数声明: 无,略过

执行阶段: 执行console.log(userName);时调用t.AO.userName 输出为toby,执行完后,代码继续往下执行,那么就到了进行var的赋值操作(var的分析和执行的区别看例子2中我有解释),此时t.AO = {userName : function() {console.log(userName);}},代码继续往下执行,接着就执行到了userName()

userName()的分析和执行阶段

分析阶段:

● 创建AO对象,userName.AO = {}

● 分析参数: 无,略过

● 分析var声明: 无,略过

● 分析函数声明: 无,略过

执行阶段: 按照例子4我们知道userName.AO是个空对象,所以会往上调用t.AO.userName,所以输出为:function () {console.log(userName);}

---

总结

JavaScript作用域会先在自己的AO上找,找不到就到父函数的AO上找,再找不到再找上一层的AO,直到找到window.这样就形成一条链,这条AO链就是JavaScript中的作用域链.