JavaScript 범위에 대한 깊은 이해
- 阿神원래의
- 2017-02-21 15:31:021270검색
소개
JavaScript는 특히 풀 스택 언어입니다. 2016년에는 JavaScript가 세계를 지배할 것이라는 이야기를 자주 듣습니다. 당시 iOS에서 TableView를 알면 일자리를 찾을 수 있었던 것처럼, 2016년에는 Vue.js를 알면 일자리를 찾을 수 있다는 소문도 있습니다. (TableView는 꽤 비슷합니다. Android의 ListView를 기반으로 하지만 이제는 기본적으로 RecyclerView를 사용합니다.)
2016년에 인기를 끌었던 프런트엔드 기술은 기본적으로 Facebook에서 제작한 모바일 크로스 플랫폼 React Native와 같은 JavaScript와 관련되어 있습니다. 그리고 Alibaba의 Weex, 최신 복구 기술인 JSPath, 그리고 백엔드 Node.js(제가 아주 좋아하는 기술 스택)를 확인하기 위해 어젯밤에 gibhub에 갔습니다. Vue의 별 수가 jQuery의 별 수를 초과했습니다. 별의 숫자가 아무것도 증명할 수는 없지만 적어도 프런트엔드 사고가 이전 문서 작업에서 데이터 기반 개발로 바뀌었다는 것을 알 수 있습니다(관심 있으신 분은 Android, iOS, Vue는 나중에 작은 데모를 통해 이러한 사고 변화를 보여줍니다. 일부 회사에서는 EasyUI를 대체하기 위해 이 회사에서 제작한 Hungry 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
● 정의되지 않음
● toby
이게 이상하네요. 정의되지 않은 것이 왜 있는 걸까요? 우선 변수 검색이 근접성 원칙을 따른다는 점을 이해해야 합니다. 먼저 함수에서 검색한 다음 찾을 수 없으면 밖을 살펴보세요. 함수에 str2가 있지만 console.log(str2)로 실행하면 str2가 정의되지 않으므로 정의되지 않습니다
어휘 분석
무슨 일이 발생하는지 알려면 왜 발생하는지 알아야 하므로 몇 가지를 살펴보겠습니다. 예시 더보기
예제 1
<script>
function t(userName) {
console.log(userName);//这里输出什么?
function userName() {
console.log('tom');
}
}
t('toby');
</script>출력 결과는 무엇인가요? 이 예시는 위와 같은 것 같은데, 마치 고등학교 수학으로 돌아가는 것 같습니다. 이때 질문 유형이 바뀌면 혼란스러워하는 학생들도 있지만 실제 출력은
function userName() {
console.log('tom');
}입니다. 사실 이 함수는 도메인 문제는 모두 a를 통해 파생될 수 있습니다. "수식 집합"입니다. JS에서 함수가 실행되기 전에 수행해야 하는 작업 중 하나가 어휘 분석, 변수 선언 분석, 함수 분석입니다. 선언한 다음 이 질문을 사용하여 수식을 적용합니다.
t('toby')를 실행하면 두 단계가 시작됩니다. 하나는 분석 단계입니다.
분석 단계:
● 함수가 실행되는 순간 Active Object(이하 AO 객체)가 생성됩니다. 함수 범위 내에서 찾을 수 있는 모든 변수는 On입니다. AO, 이때의 코드는 다음과 같이 표현됩니다. t.AO = {}
● 분석 매개변수: 매개변수를 받아 매개변수 이름을 속성으로, 매개변수 값을 속성값으로 사용하기 때문입니다. 매개변수가 없으면 분석 결과는 다음과 같은 코드를 사용합니다. t.AO = {userName : toby}
● var 선언 분석: t 함수에 var 선언이 없습니다. 건너뛰기
● 함수 선언 분석: 이 함수 선언에는 함수 이름과 동일한 이름의 속성이 AO에 있으면 이 함수가 JS 필드의 변수 유형이기 때문에 이를 덮어쓰게 되는 특징이 있습니다. t.AO = { userName : function userName() {console .log('tom');}}
실행 단계:
t(를 실행할 때) 'toby'), console.log(userName)이 실행되면 t가 AO.userName이 호출되므로 최종 출력 결과는 function userName() {console.log('tom');}
입니다. 예제 2
<script>
function t(userName) {
console.log(userName);//这里输出什么?
var userName = function () {
console.log('tom');
}
}
t('toby');
</script>그럼 출력은 어떻게 되나요? 위의 예와 다른 것 같은데 또 헷갈리네요. 고민하지 말고 공식을 굳게 따르세요. 다시 과정을 거치게 됩니다. (위의 예시는 좀 더 자세히 작성했고, 다음 분석은 단순 쓰기입니다.)
분석에 앞서 먼저 두 가지 개념을 이해해야 합니다. 하나는 함수 선언이고 다른 하나는 함수입니다. 표현식
//这个叫函数声明
function userName() {
console.log('tom');
}
//这个叫函数表达式
var userName = function () {
console.log('tom');
}분석 단계:
● 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('toby');//这里会输出什么?
}
var t2 = function () {
console.log('hello toby');//这里会输出什么?
};
</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('toby');
</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('toby');
</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 userName() {console.log(userName);}}},代码继续往下执行,接着就执行到了userName()
userName()的分析和执行阶段
分析阶段:
● 创建AO对象,userName.AO = {}
● 分析参数: 无,略过
● 分析var声明: 无,略过
● 分析函数声明: 无,略过
执行阶段: 按照例子4我们知道userName.AO是个空对象,所以会往上调用t.AO.userName,所以输出为:function userName() {console.log(userName);}}}
总结
JavaScript作用域会先在自己的AO上找,找不到就到父函数的AO上找,再找不到再找上一层的AO,直到找到window.这样就形成一条链,这条AO链就是JavaScript中的作用域链.JavaScript中有两条很重要的链,一条是作用域链,一条是原型链,