JavaScript 문 실행 프로세스 토론_javascript 기술
- WBOY원래의
- 2016-05-16 15:17:061469검색
더 이상 고민하지 않고 바로 본론으로 들어가겠습니다. 자바스크립트의 작동원리는 다음과 같이 요약됩니다.
1. HTML 문서 흐름 순서대로 자바스크립트 코드 실행
브라우저는 문서 흐름에 따라 페이지 구조와 정보를 위에서 아래로 점진적으로 파싱합니다. 자바스크립트 코드는 내장된 스크립트이자 html 문서의 구성요소이므로 로드 시 자바스크립트 코드의 실행 순서도 이에 따릅니다. 스크립트 태그에서 9603c24256dd4432b3cbe3bdf17e5fda의 src 속성을 통해 외부 .js 파일이 도입되면 해당 파일도 해당 명령문이 나타나는 순서대로 실행되며 실행 프로세스는 문서 로딩의 일부입니다. 외부 js 파일이므로 실행이 지연되지 않습니다.
2. 사전 컴파일과 실행 순서의 관계
먼저 다음 코드를 살펴보세요.
<script type="text/javascript">
function hello() {
alert("hello");
}
hello();
function hello() {
alert("hello world");
}
hello();
</script>
위 js 코드의 출력 결과는 hello를 먼저 출력한 다음 hello world를 출력하는 대신 hello world, hello world입니다. 이는 JavaScript가 순서대로 완전히 해석되고 실행되는 것이 아니라 사전 컴파일 과정에서 정의된 함수가 먼저 실행되고 기본적으로 모든 var 변수가 생성되기 때문입니다. 프로그램 실행 효율성을 향상시킵니다. 즉, 위 코드는 실제로 JS 엔진에 의해 다음과 같이 사전 컴파일됩니다.
<script type="text/javascript">
var hello = function() {
alert("hello");
};
hello = function() {
alert("hello world");
};
hello();
hello();
</script>
위 코드를 보면 함수가 실제로는 변수이고, 함수에 값을 할당할 수 있다는 점을 확실히 알 수 있습니다. 이전 상황이 발생하지 않도록 하려면 다음과 같이 두 개의 js 파일로 정의하면 됩니다.
<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>
<script type="text/javascript">
function hello() {
alert("hello world");
}
hello();
</script>
위의 첫 번째 파일에서는 함수 앞에 hello()를 넣었는데, 올바른 결과가 출력될 수 있었습니다.
<script type="text/javascript">
hello();
var hello = function() {
alert("hello");
};
// hello();
</script>
위 방법을 사용하여 함수를 정의하면 오류 메시지가 아래 그림 1과 같이 보고됩니다.
여기서 hello is not a function 오류가 보고됩니다. 이는 사전 컴파일 중에 var로 선언된 변수가 먼저 처리되지만 변수 값이 정의되지 않았기 때문입니다. 그런 다음 hello()를 실행할 때 이전 hello가 정의되지 않았고 유형이 결정되지 않았으므로 여기서 hello는 함수가 아닙니다. 이 함수는 프로그램에 정의되어 있지만 정의된 위치는 호출 뒤에 있기 때문에 호출을 하면 여기서는 프로그램이 실행되지 않으므로 쓸모가 없다.
다음 코드를 살펴보세요.
<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>
위 코드는 함수 정의 전에 호출되었지만 function 키워드로 정의되어 있는데, function으로 정의할 때는 var와 다릅니다. function을 정의할 때는 함수의 값이 이미 설정되어 있습니다. 과거이므로 여기서 실행할 수 있습니다.
요약:
JavaScript 엔진은 스크립트를 구문 분석할 때 사전 컴파일 중에 선언된 모든 변수와 함수를 처리합니다. 처리는 다음과 같습니다.
(1) 유사한 "사전 컴파일" 작업이 실행 전에 수행됩니다. 먼저 현재 실행 환경에서 활성 개체가 생성되고 var로 선언된 변수가 활성 개체의 속성으로 설정됩니다. 그러나 이때 이러한 변수의 할당은 모두 정의되지 않았으며 function으로 정의된 함수도 활성 개체의 속성으로 추가되며 해당 값은 정확히 함수의 정의입니다.
(2) 해석 및 실행 단계에서 변수를 구문 분석해야 할 경우 현재 실행 환경의 활성 개체에서 해당 변수를 먼저 검색하고 실행 환경 소유자가 해당 변수를 가지고 있습니다. 프로토타입 속성인 경우 프로토타입 체인에서 검색됩니다. 그렇지 않으면 범위 체인에 따라 검색됩니다. var a = ...와 같은 문이 나타나면 해당 변수에 값이 할당됩니다(참고: 변수 할당은 해석 및 실행 단계에서 완료됩니다. 이 전에 변수를 사용하면 해당 값이 할당됩니다. 정의되지 않음).
(3) 요약하자면 한 문장으로 요약하면 변수 선언은 사전 컴파일 기간에 있고 변수 초기화는 런타임에 있습니다.
<script type="text/javascript"> alert(a); // 在预编译期间a变量已经加载，但是用var定义，所以赋值为undefined先，故这里输出undefined。 var a = 1; // 这里给前面的没有赋值的a进行赋值为1 alert(a); // 这里输出的a已经是前面赋值过的，所以输出1。 </script>
위 코드의 경우 출력 결과는 다음과 같습니다. undefine이 먼저 출력되고 그 다음 1이 출력됩니다. 분석은 코드 설명을 참조하세요.
변수와 함수 선언은 문서 어디에나 있을 수 있지만 모든 JavaScript 코드보다 먼저 전역 변수와 함수를 선언하고 변수를 초기화하고 할당하는 것이 좋습니다. 함수 내에서 변수는 먼저 선언된 다음 참조됩니다.
3. 블록 단위로 자바스크립트 코드 실행
소위 코드 블록은 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그로 구분된 코드 세그먼트입니다. JavaScript 인터프리터는 스크립트를 실행할 때 블록 단위로 실행합니다. 평신도의 관점에서 보면 브라우저가 HTML 문서 스트림을 구문 분석할 때 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 발견하면 JavaScript 인터프리터는 코드 블록이 로드될 때까지 기다렸다가 코드 블록을 사전 컴파일한 다음 실행합니다. 실행 후 브라우저는 다음 HTML 문서 흐름을 계속 구문 분석하고 JavaScript 인터프리터는 다음 코드 블록을 처리할 준비가 됩니다. 자바스크립트는 블록 단위로 실행되기 때문에 자바스크립트 블록 내에서 다음 블록에 선언된 변수나 함수를 호출하면 구문 오류가 발생합니다.
<script> alert(a); </script> <script> var a = 1; </script>
上面的这段代码，由于是两个代码块，先执行完第一个代码块，再执行第二个代码块。执行第一个代码块的时候，变量a没有声明，所以报错，报错信息是：a is not defined。
<script> var a = 1; </script> <script> alert(a); </script>
虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。所以，上面的这两个代码块运行的时候，虽然是两个代码块，但是第一段运行以后，a变量就存在了全局作用域中，此时运行到第二个代码块，输出的a变量就可以调用全局作用域中的a，所以没有问题。
4、借助事件机制改变javascript执行顺序
由于JavaScript是按块处理代码，同时又遵循HTML文档流的解析顺序，所以在上面示例中会看到这样的语法错误。但是当文档流加载完毕，如果再次访问就不会出现这样的错误。为了安全起见，我们一般在页面初始化完毕之后才允许JavaScript代码执行，这样可以避免网速对JavaScript执行的影响，同时也避开了HTML文档流对于JavaScript执行的限制。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
alert(a);
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>
windows.onload = function()表示先在触发事件上加一个函数，并不立即执行，而是在整个页面都加载完成以后再开始执行该事件，及function。所以，在windows.onload执行之前，就已经把一些变量加载到了全局区中，所以没有问题。上面的输出结果是：先输出bb，再输出cc，最后输出a。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
alert(a);
};
// 上面的onload不会执行，只会执行下面的onload
window.onload = function() {
alert("onload2");
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>
如果在一个页面中存在多个windows.onload事件处理函数，则只有最后一个才是有效的(如上面的代码所示)，为了解决这个问题，可以把所有脚本或调用函数都放在同一个onload事件处理函数中，如下面的代码所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
// 放到一起
alert(a);
alert("onload2");
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>
5、javascript输出脚本的执行顺序
在JavaScript开发中，经常会使用document对象的write()方法输出JavaScript脚本。document.write()方法先把输出的脚本字符串写入到脚本所在的文档位置，浏览器在解析完document.write()所在文档内容后，继续解析document.write()输出的内容，然后才按顺序解析后面的HTML文档。也就是说，JavaScript脚本输出的代码字符串会在输出后马上被执行。请注意，使用document.write()方法输出的JavaScript脚本字符串必须放在同时被输出的3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中，否则JavaScript解释器因为不能够识别这些合法的JavaScript代码，而作为普通的字符串显示在页面文档中。但是，通过document.write()方法输出脚本并执行也存在一定的风险，因为不同JavaScript引擎对其执行顺序不同，同时不同浏览器在解析时也会出现Bug。
以上所述是小编给大家介绍的JavaScript语句的执行过程，希望对大家有所帮助。