一段html了解 javascript 的生命周期

白小二的个人博客 / 0 / 8 / 创建于 1年前 / 更新于 1年前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <title>Document</title>
</head>
<body>

</body>
<script>
    /**
     * javascript 作用域以及生命周期
     * javascript 的生命周期是自顶向下的， 而寻找变量是自底向上的, js编译变量的时候会优先编译函数，然后编译变量，所以执行语句会先从内部寻找变量的时候，不会受执行语句在变量前后的影响
     * javascript 的函数分为两种：匿名函数及具名函数，匿名函数及具名函数都具有定义及执行两个操作，并且都可以携带参数
     * 其中需要注意iframe刷新，iframe刷新的变量是隶属于所处window对象的，层级访问window对象的方法为 window.parent, window.top，访问同级iframe的方法为，自己打印一下测试
    */
    var a;
    a = 100;
    var b;
    b = 200;
    function fn(b,b2){
        // 这里的a是全局变量
        b(a);
        b2();
        var b;
        function fn2(){
            var c;
        }
    }
    var b1 = function(a){
        console.log("fn函数参数a 100："+a)
    }
    // 这里的a是全局变量
    var b2 = function(){
        console.log("fn全局变量a 100："+a)
    }

    // 这的a是函数的参数，需要在调用它的地方传入
    fn(b1,b2);
    // 这里的a是内部变量，需要内部实现
    a = 100;

    (function(){ 
        console.log("function 内部变量a ："+a) // 内部变量a 100
        console.log("function 全局变量b ："+b) // 全局变量b 200
        var a; 
        console.log("function 内部变量a："+a) // undefined
        a = 1001;
        console.log("function 全局变量a："+a) // 1001

    })()
</script>
</html>

运行结果

本作品采用《CC 协议》，转载必须注明作者和本文链接

reading

var a; a = 100; var b; b = 200; function fn(b,b2){ // 这里的a是全局变量 b(a); b2(); var b; function fn2(){ var c; } } var b1 = function(a){ console.log("fn函数参数a 100："+a) } // 这里的a是全局变量 var b2 = function(){ console.log("fn全局变量a 100："+a) } // 这的a是函数的参数，需要在调用它的地方传入 fn(b1,b2); // 这里的a是内部变量，需要内部实现 a = 100; (function(){ console.log("function 内部变量a ："+a) // 全局变量 100 console.log("function 全局变量b ："+b) // 全局变量 100 var a; console.log("function 内部变量a："+a) // undefined a = 1001; console.log("function 全局变量a："+a) // 1001 var c = 100 const d = 100 })() console.log("全局变量a: " +a) let log = () => { console.log("全局变量a: " +a) console.log("全局变量c: " +c) console.log("全局变量d: " +d) } log() VM698:15 fn函数参数a 100：100 VM698:19 fn全局变量a 100：100 VM698:28 function 内部变量a ：undefined VM698:29 function 全局变量b ：200 VM698:31 function 内部变量a：undefined VM698:33 function 全局变量a：1001 VM698:38 全局变量a: 100 VM698:41 全局变量a: 100 VM698:42 Uncaught ReferenceError: c is not defined at log (<anonymous>:42:31) at <anonymous>:45:1 log @ VM698:42

const a = {a:'a'} // undefined a.a = 'b' // 'b' const b = [0] // undefined b[0] = 1 // 1 a = [] // VM902:1 Uncaught TypeError: Assignment to constant // variable. // at <anonymous>:1:3 // (匿名) @ VM902:1 b = {} // VM924:1 Uncaught TypeError: Assignment to constant // // variable. // at <anonymous>:1:3 // (匿名) @ VM924:1 let c = {c:'c'} // undefined c = [] // [] let d = [0] // undefined d = {} // {}

Psy Shell v0.11.11 (PHP 8.1.2-1ubuntu2.11 — cli) by Justin Hileman > const A = 'a' ; const B = []; B[0] = 1; // 可以看到这里报错了，我是在 php artisan tinker 里面跑的，所以是 tinker 环境报错而不是 php 报错 PHP Fatal error: Cannot use temporary expression in write context in /home/vendor/psy/psysh/src/ExecutionLoopClosure.php(53) : eval()'d code on line 1

讨论数量: 8

JinBB

152 声望

你这个不对吧，函数内的var都是会提升的。

1年前评论

徵羽宫

课程读者 298 声望

试着在右边的控制台跑了一下，立即执行表达式 中第一个console.log 的结果和文章中不同，然后 function 里面的 var a 也没有提升(这里使用提升这个词是错误的)成全局变量。

徵羽宫（作者）

@白小二
在JavaScript中，变量作用域指的是变量的可访问性和生存周期。变量在不同的代码块中能否被访问，以及在什么时候它们被创建和销毁，都是由其作用域定义的。变量的提升是指在JavaScript中变量声明的提前。在代码执行之前，JavaScript引擎会扫描代码并将所有声明的变量提升到作用域的顶部，但不包括变量的赋值。这意味着您可以在声明之前使用变量，但使用前必须先声明。例如：

console.log(myVar); // undefined 
var myVar = "Hello World!";

虽然该变量在声明之前已经被引用了，但由于变量提升的存在，代码不会抛出错误。相反，变量的值为 undefined。需要注意的是，只有声明的变量才会被提升，赋值语句不会被提升。此外，let和const关键字声明的变量不会被提升，它们只能在声明位置后使用。

AI 的解释…

@白小二 var 其实不是全局变量的意思, let 是可变变量的意思 const 是不可变变量这里的 const 的值如果是数组或对象的话数组项和对象属性是可以修改的。 let 可以只声明不赋值， const 声明的时候必须赋值。 let 和 const 是块作用域， var 是函数作用域。

白小二（楼主）

我不清楚提升是啥意思，一开始注释有误，我补上运行结果了，根据运行结果，我的结论是，javascript是一种堆栈式寻址的方式寻找变量，并且首次访问不受执行语句位置的影响

就是一种自底向上的寻址方式

@徵羽宫懂了，跟我理解的一样，但是多了 let 的解释，const 是常量，在 javascript 里面作用域跟估计是跟全局变量一致的，也就是编译内存所处位置在同个生命周期的最根部

@白小二

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

一段html了解 javascript 的生命周期

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

一段html了解 javascript 的生命周期

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录