zoukankan      html  css  js  c++  java
  • js的执行和调试

    JavaScript 是指在浏览器运行的脚本
    脚本就是剧本,在指定场景,特定时间,规定角色的对白,动作,情绪的变化
    并且js是同步的,单线程的执行脚本

    同步异步
    js的运行是同步的,

    • 运行完第一行才会运行第二行
    • 遇到函数执行会进入函数里,等函数执行完再回到跳进去的行数
    • 异步有计时器和AJAX
    • 异步不会停在原地等返回,会立即执行下一行,等到异步有返回再暂停当前执行,临时接回异步回调,异步回调执行完再回到正常执行顺序
    1. var a = "a";
    2. b()  
    3. var c = "c" 
    4. function b(){
    5.    ...   
    6. }     
    7. d() 
    8. function d(){
    9.     ajax({
    10.        success:function(res){
    11.           console.log(res)
    12.        }
    13.     })
    14. }
    15. var e = "e";
    16. ...
    

    上面的执行路线是1,2,4_5_6,3,7,8_9,15,...,直到ajax返回,10_11_12_13_14,....

    return

    • 用于提前跳出函数作用域可以用return
    • return可以省去全局变量赋值过程
    • return不能跳出全局作用域,代码检查都没法通过
    function init(){
        console.log("1")
        console.log("2")
        console.log("3")
        return "截断";
        console.log("4")
    }
    console.log(init())  //打印1,2,3,"截断"
    // 如果没有使用return,就需要定义一个全局变量,把"截断"赋值给全局变量,再打印出来
    

    变量提升,函数提升
    js在被运行前需要先被检查一遍,这叫检查解析
    检查:代码少括号,少逗号都是会报错的
    解析:解析过程会有一个变量提升函数提升的问题

    // 未声明变量,执行一行打印
    console.log(a) //Uncaught ReferenceError: a is not defined
    
    // 在后面声明变量
    console.log(a) //underfind
    var a = 1;
    // 这次不会报错了,而是表示没值,就说明a被声明了,只是没值
    // 但是js是同步执行的,在console运行完之前,根本不知道他后面有一行代码声明了a
    // 这是因为js在运行前【解析阶段】,变量就被声明了,这就是【变量提升】
    
    // 而函数更神奇的是,写在执行之后的函数居然可以执行,不会报错,不会underfind,这就是【函数提升】
    b();
    function b(){ ... }
    

    结论:js在解析过程之中,
    遇到var就会先给他声明,但没有赋值,因为变量总是会变的
    遇到function就整个声明加赋值,如果有同名的就后一个覆盖前一个

    运行调试
    运行调试就是为了知道当前运行到了哪一行,当前变量的值
    最基本的就是在需要测试的点consolealert,缺点是之后要删掉或者注释掉
    还有就是用debugger称为打断点

    var num = 10;
    // 在需要调试的地方写上一个debugger
    // 然后刷新页面
    debugger
    for(var i=0;i<5;i++){
    num = num + i;
    }
    

    image.png

    刷新页面后当程序运行到到了断点时,屏幕会变灰,出现一个播放的箭头,一个进入的箭头,然后打开F12会自动进入Sources界面,在page下灰色选中的就是当前断点所在位置,如果断点是在js文件,灰色选中就是js文件,右边的就是灰色选中的文件详情,可以看见11行被蓝色选中,这就是断点开始的位置

    在这个状态下,鼠标移到变量上是可以看到当前的值的,这跟console或者alert有一样的效果

    image.png

    当我把鼠标移动到i上,因为i在12行,当前程序暂停在11行,i未赋值,但是被变量提升了,所以显示undefined

    调试是怎么调试的,
    播放箭头点击是跳出这个debuger,到下一个debuger的意思,如果没有下一个,就等于结束了
    播放箭头旁边的按钮才是最常用的,快捷键是F10

    如果你的代码跟我一样,按13下F10之后,num是13,i是3

    image.png

    这时你点击一下播放的箭头,就停止调试了,就结束了,debugger调试就说完了

    还有个缺点就是还得去删掉debuger,所以还有另一个调试的方法

    image.png

    在没有debugger的情况下,直接打开F12进入Sources找到page下的需要打断点的文件,然后在右边的行数点击一下,有个蓝色的箭头就是打上了临时断点,如图我打了两个临时断点,这时再刷新页面,临时断点还是在的,然后按上面的方法就可以直接调试了,调试完回去把临时断点删了,不删也行,无所谓,这个方式可以调试别人的网页

    预告篇

    image.png

    把var改成let进行调试,我们可以看到i不再是undefined了,而是错误表示没声明,let破解了变量提升,变量提升不好?其实没有什么好与不好,而是用严谨还是不严谨的态度去判断的,let是什么,let是2015年的es升级带来的新的api,也就是es2015,也叫es6,后来2016,2017,2018,2019,一年一个版本,陆续出现了es7,es8,es9,es10,下一篇就讲es6789

  • 相关阅读:
    java反射并不是什么高深技术,面向对象语言都有这个功能,而且功能也很简单,就是利用jvm动态加载时生成的class对象
    java反射意义
    vs2013中国集
    用户向导页面实现左右滑动的ImageSwitcher
    Java / Android H基于ttp多线程下载的实现
    成语接龙(dfs)
    python 弄github代码库列表
    leetcode先刷_Unique Paths II
    jquery于form正在使用submit问题,未解决
    Vs2012于Linux应用程序开发(2):图案
  • 原文地址:https://www.cnblogs.com/pengdt/p/12037557.html
Copyright © 2011-2022 走看看