码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 零基础JavaScript学习【第六期】


     博主有话说:这个礼拜有些忙,离上一次更新已经过了亿天,这几天较忙所以更新会有点慢,谢谢大家的支持。(っ•̀ω•́)っ✎⁾⁾ 我爱学习

    个人空间:GUIDM的个人空间

    专栏内容:零基础JavaScript学习

    基础还是关键。

    欢迎大家的一键三连。

      前情回顾:第一期https://blog.csdn.net/m0_61901625/article/details/124772807?spm=1001.2014.3001.5501第二期https://guidm.blog.csdn.net/article/details/124787412 第三期https://blog.csdn.net/m0_61901625/article/details/124850201?spm=1001.2014.3001.5501第四期https://blog.csdn.net/m0_61901625/article/details/124902774?spm=1001.2014.3001.5501第五期https://blog.csdn.net/m0_61901625/article/details/124934438?spm=1001.2014.3001.5501持续更新中……

     上一期学到函数,这一期来讲讲作用域和预解析。

    作用域

    目的:为了提高程序的可靠性,减少命名冲突。

    JS的作用域分为:

    1. 全局作用域
    2. 局部作用域

    1、全局作用域

    整个<script>标签或一个单独的JS文件

    1. <script>
    2. var num=10;
    3. </script>

     2、局部作用域

    在函数内部则是局部作用域,只在函数内部起效果和作用。

    1. function fn(){
    2. //局部作用域;
    3. }

     变量的作用域

    1、全局变量

    在全局作用域下的变量。

    1. var num=10;
    2. console.log(num);
    3. function fn(){
    4. console.log(num);
    5. }
    6. fn();

     因为num是全局变量,函数中没有另外声明一个变量,仅只有一个全局变量的num,所以函数中的num为全局变量中的num,最后结果为10。

    2、局部变量

    在局部作用域下的变量,只能在函数内部使用。

    1. function fun(){
    2. var num=10;
    3. }
    4. fun();
    5. console.log(num);

    因为num是在函数中的为局部变量,使用在调用函数fun()结果为10。但console.log打印的为全局变量,num仅为局部变量不能在函数外使用,所以返回的结果为num is not defined。

    如果在函数内部没有声明直接赋值的变量也属于全局变量。

    3、二者做比较

    1. 全局变量只有浏览器关闭的时候才会销毁,比较占内存资源。
    2. 局部变量当我们程序执行完毕就会销毁,比较节约内存。
    3. JS没有块级作用域(es6的时候新增的块级作用域)。
    4. 块级作用域:{ }  if{ } for{ }

    作用域链

    1. 只要是代码就至少有一个作用域。
    2. 写在函数内部的局部作用域。
    3. 如果函数中含有函数,那么在这个作用域中又可以诞生一个作用域
    1. var num=10;
    2. function fn(){//外部
    3. var num=20;
    4. function fun(){//内部
    5. console.log(num);
    6. }
    7. }

    7a404cde921741d78e651e0c8712ad98.png​ 

    内部函数访问外部函数的变量采取的是链式查找的方式来决定取哪个值。

    JS预解析

    JS引擎执行JS分为两步:

    1. 预解析:js引擎会把js里面所有的var和function提升到当前作用域的最前面。
    2. 代码执行:按顺序从上往下执行。

    预解析分为:

    1. 变量提升:把所有的变量声明提升到当前的作用域最前面(不提升赋值操作)。
    2. 函数提升:把所有的函数声明提升到当前作用域的最前面。
    1. 1、变量提升:
    2. console.log(num);
    3. var num=10;
    4. ↓↓↓↓
    5. var num;//变量提升
    6. console.log(num);
    7. num=10;//赋值不提升
    8. 2、函数提升
    9. fun();
    10. var fun=function(){
    11. console.log(22);
    12. }
    13. ↓↓↓↓
    14. var fun;//函数提升
    15. fun();
    16. fun=function(){
    17. console.log(22);
    18. }

     预解析练习:

    通过几个练习题来熟悉预解析叭!

    1、

    1. var num=10;
    2. fun();
    3. function(){
    4. console.log(num);
    5. var num=20;
    6. }
    7. ↓↓↓↓
    8. var num;//变量提升(全局作用域)
    9. function=fun(){
    10. var num;//变量提升(局部作用域)
    11. console.log(num);
    12. num=10;
    13. }
    14. fun();

    2、

    1. var num=10;
    2. function fn(){
    3. console.log(num);
    4. var num=20;
    5. console.log(num);
    6. }
    7. fn();
    8. ↓↓↓↓
    9. var num;
    10. function fn(){
    11. var num;
    12. console.log(num);
    13. num=20;
    14. console.log(num);
    15. }
    16. num=10;
    17. fun();

    3、

    1. var a=18;
    2. fn();
    3. function fn(){
    4. var b=9;
    5. console.log(a);
    6. console.log(b);
    7. var a='123';
    8. }
    9. ↓↓↓↓
    10. var a;
    11. function fn(){
    12. var b;
    13. var a;
    14. b=9;
    15. console.log(a);
    16. console.log(b);
    17. a='123';
    18. }
    19. a=18;
    20. fn();

    b71c8b47b41449778af14a041eff4702.png​

     下一期来开始new对象了哈哈。敬请期待…

     

     

     

     

  • 相关阅读:
    【办公自动化】用Python将PDF文件转存为图片(文末送书)
    Spring 6【前置通知注解实现、同一切面多个相同类型通知执行顺序、代理设计模式、动态代理示例】(十六)-全面详解(学习总结---从入门到深化)
    【SpringBoot】7.SpringBoot整合Swagger
    计算机毕业设计Java租车管理系统(源码+系统+mysql数据库+lw文档)
    Python教程
    使用ABP SignalR重构消息服务(一)
    把握鸿蒙生态机遇,共创智能应用未来
    Linux零拷贝原理学习
    PCL 点云超体素分割-SupervoxelClustering
    Go 常用标准库之 fmt 介绍与基本使用
  • 原文地址:https://blog.csdn.net/m0_61901625/article/details/125009963
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号