javascript 실행 메커니즘의 실행 순서 이해
4555 단어 javascript운영 메커니즘실행 순서
그럼 자바스크립트는 어떻게 해석하는 거예요?그것의 집행 순서는 또 어떻습니까?이런 것들을 이해하기 전에 우리는 먼저 몇 가지 중요한 용어를 알게 되었다.
1. 코드 블록
JavaScript의 코드 블록은
<script type="text/javascript">
alert("这是代码块一");
</script>
<script type="text/javascript">
alert("这是代码块二");
</script>
<script type="text/javascript">
alert(str);//因为没有定义str，所以浏览器会出错，下面的不能运行
alert("我是代码块一");//没有运行到这里
var test = "我是代码块一变量";
</script>
<script type="text/javascript">
alert("我是代码块二"); //这里有运行到
alert(test); //弹出"我是代码块一变量"
</script>2. 성명식 함수와 부치식 함수
JS의 함수 정의는 성명식 함수와 부치식 함수 두 가지로 나뉜다.
<script type="text/javascript">
function Fn(){ //声明式函数
}
var Fn = function{ //赋值式函数
}
</script>3. 번역 기한과 집행 기한
사실 JS의 해석 과정은 두 단계로 나뉘는데 그것이 바로 사전 번역기(사전 처리)와 집행기이다.
사전 컴파일러 JS는 이 코드 블록에 있는 모든 성명된 변수와 함수를 처리합니다(C 언어와 유사한 컴파일). 그러나 주의해야 할 것은 이때 처리 함수는 성명식 함수일 뿐이고 변수도 성명만 했지만 초기화되고 값을 부여하지 않았습니다.
<script type="text/javascript">
Fn(); //执行结果："执行了函数2",同名函数后者会覆盖前者
function Fn(){ //函数1
alert("执行了函数1");
}
function Fn(){ //函数2
alert("执行了函数2");
}
</script>
<script type="text/javascript">
Fn(); //执行结果："执行了声明式函数",在预编译期声明函数及被处理了，所以即使Fn()调用函数放在声明函数前也能执行。
function Fn(){ //声明式函数
alert("执行了声明式函数");
}
var Fn = function(){ //赋值式函数
alert("执行了赋值式函数");
}
</script>
//代码块一
<script type="text/javascript">
alert(str);//浏览器报错,但并没有弹出信息窗
</script>
//代码块二
<script type="text/javascript">
alert(str); //弹窗"undefined"
var str = "aaa";
</script>
//js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值，所以导致代码块二中的变量是unfiened的，而代码一中的变量是完全不存在的，所以浏览器报错。
<script type="text/javascript">
Fn(); //浏览器报错:"undefined"
</script>
<script type="text/javascript">
function Fn(){ //函数1
alert("执行了函数1");
}
</script>이제 정리하겠습니다.
step 1. 첫 번째 코드 블록을 읽습니다.
step 2. 문법 분석을 하고 오류가 있으면 문법 오류(예를 들어 괄호가 일치하지 않는 등)를 보고하고 step5로 이동합니다.
step 3. var 변수와function 정의를 미리 컴파일링 처리합니다. (정확한 성명만 해석하기 때문에 영원히 틀리지 않습니다.
step 4. 코드 세그먼트를 실행하고, 오류가 있으면 오류를 보고합니다. (예를 들어 변수가 정의되지 않았습니다.)
step 5. 다음 코드 세그먼트가 있으면 다음 코드 세그먼트를 읽고 step2를 반복합니다.
step6. 끝.
한편, HTML 문서 흐름의 실행 순서에 따라 페이지 요소가 렌더링되기 전에 실행해야 하는 js 코드는 앞의
<script type="text/javascript">
alert("first");
function Fn(){
alert("third");
}
</script>
<body οnlοad="Fn()">
</body>
<script type="text/javascript">
alert("second");
</script>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
개별 마크다운 블로그 페이지 만들기 - 13부이를 통해 개별 마크다운 기반 블로그 게시물 작성을 시작할 수 있습니다! 이 기사를 따르려면 을 시작점으로 사용하십시오. blog 페이지 디렉토리에 동적 페이지를 생성하여 시작할 수 있습니다. 이 파일[slug].j...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
