当前位置：网站首页>JS预解析

JS预解析

2022-06-12 06:03:00 【来自万古的忧伤】

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
代码执行：从上到下执行JS语句。预解析只会发生在通过 var 定义的变量和 function 上。
学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

预解析也叫做变量、函数提升。
变量提升：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

函数提升：函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script> // 1问  console.log(num); // 2问 console.log(num); // undefined 坑 1 var num = 10; // 相当于执行了以下代码 // var num; // console.log(num); // num = 10; // 3问  function fn() {
       console.log(11); } fn(); // 4问 fun(); // 报错 坑2  var fun = function() {
       console.log(22); } // 函数表达式 调用必须写在函数表达式的下面 // 相当于执行了以下代码 // var fun; // fun(); // fun = function() {
       // console.log(22); // } // 1. 我们js引擎运行js 分为两步： 预解析 代码执行 // (1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面 // (2). 代码执行 按照代码书写的顺序从上往下执行 // 2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升） // (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作 // (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数 </script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script> // 预解析案例 // 案例1 // var num = 10; // fun(); // function fun() {
       // console.log(num); // var num = 20; // } // // 相当于执行了以下操作 // // var num; // // function fun() {
       // // var num; // // console.log(num); // // num = 20; // // } // // num = 10; // // fun(); // // 案例2 // var num = 10; // function fn() {
       // console.log(num); // var num = 20; // console.log(num); // } // fn(); // // 相当于以下代码 // // var num; // // function fn() {
       // // var num; // // console.log(num); // // num = 20; // // console.log(num); // // } // // num = 10; // // fn(); // // 案例3 // var a = 18; // f1(); // function f1() {
       // var b = 9; // console.log(a); // console.log(b); // var a = '123'; // } // 相当于以下代码 // var a; // function f1() {
       // var b; // var a; // b = 9; // console.log(a); // console.log(b); // a = '123'; // } // a = 18; // f1(); // 案例4 f1(); console.log(c); console.log(b); console.log(a); function f1() {
       var a = b = c = 9; console.log(a); console.log(b); console.log(c); } // 以下代码 // function f1() {
       // var a; // a = b = c = 9; // // 相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看 // // 集体声明 var a = 9, b = 9, c = 9; // console.log(a); // console.log(b); // console.log(c); // } // f1(); // console.log(c); // console.log(b); // console.log(a); </script>
</head>

<body>

</body>

</html>

原网站

版权声明
本文为[来自万古的忧伤]所创，转载请带上原文链接，感谢
https://qushuaibo.blog.csdn.net/article/details/125221267

当前位置：网站首页>JS预解析

JS预解析

边栏推荐

猜你喜欢

随机推荐