js的执行和调试

标签：cti   打印   方式   log   asc   代码   线程   alt   剧本   

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就整个声明加赋值，如果有同名的就后一个覆盖前一个

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

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

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

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

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

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

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

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

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

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

预告篇

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

js的执行和调试

标签：cti   打印   方式   log   asc   代码   线程   alt   剧本   

原文地址：https://www.cnblogs.com/pengdt/p/12037557.html