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
就整个声明加赋值,如果有同名的就后一个覆盖前一个
运行调试
运行调试就是为了知道当前运行到了哪一行,当前变量的值
最基本的就是在需要测试的点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的执行和调试的更多相关文章
- 在Visual Studio上开发Node.js程序(2)——远程调试及发布到Azure
[题外话] 上次介绍了VS上开发Node.js的插件Node.js Tools for Visual Studio(NTVS),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...
- Node.js实战(四)之调试Node.js
当项目逐渐扩大以后,功能越来越多,这时有的时候需要增加或者修改,同时优化某些功能,就有可能出问题了.针对于线上Linux环境我们应该如何调试项目呢? 别怕,Node.js已经为我们考虑到了. 通过 n ...
- webpack最简单的入门教程里bundle.js之运行单步调试的原理解析
读这篇文章的朋友,请确保对webpack有最基础的认识. 您可以阅读我前一篇文章:Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目.https://www.to ...
- 前端(十一)—— JavaScript基础:JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符
JS存在的位置.JS变量定义.调试方式.JS数据类型.运算符 一.JS语言介绍 1.概念 浏览器脚本语言 可以编写运行在浏览器上的代码程序 属于解释性.弱语言类型编程语言 2.组成 ES语法:ECMA ...
- Node.js在Chrome进行调试
在开发node.js环境时候,调试是一件很疼苦的事情,不过随着时代不断发展,先如今已经有很多种node环境代码调试方式,今天我就笔记一下我使用的方式 node-inspector: node-insp ...
- js立即执行函数
一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号 (function(){alert(1);})(); ...
- js的执行机制
遇到一个问题,因为自己本身就是菜鸟的原因,弄懂了还是很高兴的. console.log(a) function a() { return "this is function" } ...
- 关于js预编译以及js文件执行顺序的几个问题。
关于js的执行原理,除去html页面中直接添加的代码,js代码的放置可以分为两类. //情形a <script type="text/javascript" ...
- win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件
win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...
随机推荐
- word2vec词向量处理中文语料
word2vec介绍 word2vec官网:https://code.google.com/p/word2vec/ word2vec是google的一个开源工具,能够根据输入的词的集合计算出词与词之间 ...
- Redis常用命令操作
字符串类型: * 存储:set key value * 获取:get key * 无值返回nil * 删除:del key 哈希类型 hash: * 存储:hset key field value * ...
- PTA的Python练习题(二)
继续在PTA上练习Python (从 第2章-5 求奇数分之一序列前N项和 开始) 1. x=int(input()) a=i=1 s=0 while(i<=x): s=s+1/a a=a+2 ...
- Caffe2 创建你的专属数据集(Create Your Own Dataset)[9]
这一节尝试把你的数据转换成caffe2能够使用的形式.这个教程使用Iris的数据集.你可以点击这里查看Ipython Notebook教程. DB数据格式 Caffe2使用二进制的DB格式来保存数据. ...
- Python学习笔记003
windows环境配置 系统变量: Path: D:\Program Files\Python35\Scripts\; D:\ProgramFiles\Python35\; D:\Program Fi ...
- c++继承:公有、私有、保护(对应p12访问限制)
公有继承(public).私有继承(private).保护继承(protected)是常用的三种继承方式. 1. 公有继承(public) 公有继承的特点是基类的公有成员和保护成员作为派生类的成员时, ...
- gcd && exgcd算法
目录 欧几里德算法与扩展欧几里德算法 1.欧几里德算法 2.扩展欧几里德算法 欧几里德算法与扩展欧几里德算法 1.欧几里德算法 #include<bits/stdc++.h> using ...
- 无root开热点教程
本教程适用于无root类开热点,理论上动态云免等均可使用 热点成功测试方法与免流测试方法相同,一般都为查看ip所在地区 热点端 1.打开个人热点 2.如果是tinyproxy可打开右上角菜单,点击热点 ...
- 事件类型-UI事件、焦点事件
DOM3级事件包括以下几类事件: UI事件:当用户与页面上的元素交互时触发 焦点事件:当元素获得或失去焦点时触发 鼠标事件:当用户通过鼠标在页面上执行操作时触发 滚轮事件:当使用鼠标滚轮时触发 文本事 ...
- Python 基础之递归 递归函数 尾递归 斐波那契
1.递归函数 定义:自己调用自己的函数递:去归:回有去有回是递归#(1)简单的递归函数def digui(n): print(n) if n > 0: digui(n- ...