一段html了解 javascript 的生命周期

白小二的个人博客 / 144 / 8 / 创建于 11个月前 / 更新于 11个月前

<!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

白小二

课程读者 143 声望

数据员 @ 牛头村民工

not i was, just i am

0 人点赞

你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程，JWT 概念及使用和 API 开发相关的进阶知识。

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

推荐文章：

更多推荐...

工作

[求职]在郑州工作4年的程序媛的简历优化 13 / 172 |

博客

冯老师的困惑——测试和正式环境掐架篇（一） 15 / 23 |

博客

简单对比一下DcatAdmin和filament的各自优缺点 28 / 33 |

面试 POPER 的后端开发工程师的离奇经历 34 / 105 |

博客

Git在项目中的那些实操(持续更新...) 22 / 3 |

博客

[开源项目] 基于 laravel 开发的一个社区/社交小程序 23 / 47 |

讨论数量: 8

JinBB

149 声望

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

11个月前评论

徵羽宫

课程读者 294 声望

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

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

11个月前评论

徵羽宫（作者）

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

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

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

AI 的解释…

徵羽宫（作者）

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

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 = {}
// {}

白小二（楼主）

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

白小二（楼主）

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

白小二（楼主）

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

徵羽宫（作者）

@白小二

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

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

帮助

一段html了解 javascript 的生命周期

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

一段html了解 javascript 的生命周期

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录