JavaScript 문 실행 프로세스 토론_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript 문 실행 프로세스 토론_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:17 PM

더 이상 고민하지 않고 바로 본론으로 들어가겠습니다. 자바스크립트의 작동원리는 다음과 같이 요약됩니다.

1. HTML 문서 흐름 순서대로 자바스크립트 코드 실행

브라우저는 문서 흐름에 따라 페이지 구조와 정보를 위에서 아래로 점진적으로 파싱합니다. 자바스크립트 코드는 내장된 스크립트이자 html 문서의 구성요소이므로 로드 시 자바스크립트 코드의 실행 순서도 이에 따릅니다. 스크립트 태그에서 <script> <p>스크립트 태그 <script>의 src 속성을 통해 외부 .js 파일이 도입되면 해당 파일도 해당 명령문이 나타나는 순서대로 실행되며 실행 프로세스는 문서 로딩의 일부입니다. 외부 js 파일이므로 실행이 지연되지 않습니다. </script>

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. 블록 단위로 자바스크립트 코드 실행

소위 코드 블록은 <script> 태그로 구분된 코드 세그먼트입니다. JavaScript 인터프리터는 스크립트를 실행할 때 블록 단위로 실행합니다. 평신도의 관점에서 보면 브라우저가 HTML 문서 스트림을 구문 분석할 때 <script> 태그를 발견하면 JavaScript 인터프리터는 코드 블록이 로드될 때까지 기다렸다가 코드 블록을 사전 컴파일한 다음 실행합니다. 실행 후 브라우저는 다음 HTML 문서 흐름을 계속 구문 분석하고 JavaScript 인터프리터는 다음 코드 블록을 처리할 준비가 됩니다. 자바스크립트는 블록 단위로 실행되기 때문에 자바스크립트 블록 내에서 다음 블록에 선언된 변수나 함수를 호출하면 구문 오류가 발생합니다. </script>

<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脚本字符串必须放在同时被输出的<script>标签中，否则JavaScript解释器因为不能够识别这些合法的JavaScript代码，而作为普通的字符串显示在页面文档中。但是，通过document.write()方法输出脚本并执行也存在一定的风险，因为不同JavaScript引擎对其执行顺序不同，同时不同浏览器在解析时也会出现Bug。</script>

以上所述是小编给大家介绍的JavaScript语句的执行过程，希望对大家有所帮助。

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

See all articles