先,上几道我编写的 js 题,作为分析的样本。
请根据代码,选择正确的选项。
第一题
var a = 0; function test(){ alert(a); } test();
A. 0
B. null
C. undefined
第二题
var a = 0; function test(){ alert(a); a = 100; } test();
A. 0
B. null
C. undefined
第三题
var a = 0; function test(){ alert(a); var a = 100; } test();
A. 0
B. 100
C. undefined
正确答案:
A , A , C
前两题没啥好说的,之前关于闭包的博文中已经讲得很清楚了,函数 test 形成了自己的闭包,所以能够访问到全局作用域里面的变量 a 。
第三题可能有人会觉得有点奇怪,为啥是 undefined 的呢?虽然我在闭包内定义了 var a = 100 , 可是它分明是在 alert 语句的下面啊,所以不是应该先打印出全局作用域里的 a 吗?
不要着急,我们来讲一个故事吧,当你将这段代码放进浏览器跑起来的那一个瞬间,到底发生了哪些有趣的事情。
当你刷新浏览器之后。。。
0.00000001 毫秒的时候
Paste_Image.png
编译器看到了这句话,
var a = 0;
编译器 : ‘nice,发现一个活的 a 变量,我要把它丢到作用域中去囚禁它!
于是
0.00000002 毫秒的时候
编译器 : nice,发现一个活的 test 变量,我擦,还是一个函数类型,作用域,又有新货了!
作用域 : ‘可以呀,小伙子!’
于是:
编译器顺便把 test 函数给“扒”了,又发现里面有这么一句话:
var a = 100;
编译器:小样,别以为你躲在 test 函数的私有作用域里面我就找不到你了,全局作用域中的a和你没关系,你也进去!
编译器:嗯,没找到什么变量定义了,好,我去休息啦。
0.00000003 毫秒的时候
js引擎:终于轮到我出场了。
var a = 0;
a(全局): js引擎大哥,给我吃饭吧 。。。
js引擎: 吵啥子吵,先给你个undefined,吃这个吧 。
于是:
a(全局):只要心中有梦想,undefined也是嚼劲十足!
js引擎: 等号右边有一个 0 ,我把它给你吧。
a(全局):谢谢引擎大哥。
同样的,test 变量 也吃上了饭。
a(局部) : 大哥,我别这么偏袒全局作用域啊,同样是 a 变量,我也要吃饭啊!
js引擎:你在函数内部,我还没执行函数呢,怎么给你吃饭呀,先给你个undefined吧。
a(局部) :可是我旁边有一个100啊。
js引擎:我刚才不是说了吗,我还没执行你呢,别挑了,有个undefined啃啃也不错了。
0.00000004 毫秒的时候
test();
js引擎:我要开始执行test函数了。
alert(a);
js引擎:作用域在吗,我知道alert是一个内置函数,当我在执行它的时候,发现有一个a变量作为参数传进去了,你见过它么?
作用域:有啊,就那个刚才还吵着要吃饭的家伙。
js引擎:哦,我想起来了,现在它估计还在啃undefined呢,行吧,你把它给我吧,alert方法点名要找他呢。
作用域:OK。
故事到这里就讲完了,现在你应该明白为什么第三题的答案是undefined了吧。
附加题:
var a = 0; function test(){ alert(a); if(false){ var a = 100; } } test();
A. 0
B. 100
C. undefined
别犹豫,大声说出你的答案吧!
可以将答案写在评论中哦!
avaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。
文本编辑器
Web浏览器
解释执行(由上而下)
JavaScript1.0——JavaScript1.4
JavaScript/IE3.0、JavaScript1.2/IE4.0;
微软允许用户自行设置对JavaScript处理模式。
JavaScript与Java的区别体现在:
首先,它们是两个公司开发的不同的两个产品,Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。
其次,JavaScript是基于对象的,而Java是面向对象的,即Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
第三,两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户,由浏览器解释执行。
第四,两种语言所采取的变量是不一样的。Java采用强类型变量检查,即所有变量在编译之前必须作声明。JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型。
第五,代码格式不一样。Java是一种与HTML无关的格式,必须通过像HTML中引用外媒体那么进行装载,其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式,可以直接嵌入HTML文档中,并且可动态装载。编写HTML文档就像编辑文本文件一样方便。
第六,嵌入方式不一样。在HTML文档中,两种编程语言的标识不同,JavaScript使用<script>...</script>来标识,而Java使用<applet> ... </applet> 来标识。
第七,静态绑定和动态绑定。Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查,如不经编译则就无法实现对象引用的检查。JavaScript采用动态联编,即JavaScript的对象引用在运行时进行检查。
如果想要更高效、更系统地学会javascript,最好采用边学边练的学习模式。
今天分享的这套JavaScript学习教程,讲解了前端开发中的核心技术JavaScript,俗称JS
内容涵盖:JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点,该视频可以开启你的WEB前端之路。
1. .JavaScript教程-JavaScript概述
2. .JavaScript教程-HTML嵌入JavaScript代码的第一种方式1
3. .JavaScript教程-HTML嵌入JavaScript代码的第一种方式2
4. .JavaScript教程-HTML嵌入JavaScript代码的第二种方式
5. .JavaScript教程-HTML嵌入JavaScript代码的第三种方式
6. JavaScript教程-JS的标识符
7. .JavaScript教程-JS的变量1
8. .JavaScript教程-JS的变量2
9. JavaScript教程-JS的函数初步1
10. .JavaScript教程-JS的函数初步2
11. .JavaScript教程-全局变量和局部变量
12. .JavaScript教程-JS的数据类型
13. .JavaScript教程-Undefined数据类型
14. .JavaScript教程-Number数据类型
15. .JavaScript教程-Boolean数据类型
16. .JavaScript教程-回顾数据类型
17. .JavaScript教程-String数据类型
18. .JavaScript教程-Object数据类型
19. JavaScript教程-Object数据类型2
20. .JavaScript教程-Object数据类型3
21. .JavaScript教程-null undefined NaN的区别以及等同和全等运算符
22. .JavaScript教程-JS的常用事件
23. .JavaScript教程-回调函数的概念
24. .JavaScript教程-注册事件的两种方式
25. JavaScript教程-JS代码的执行顺序
26. .JavaScript教程-JS代码的执行顺序2
27. JavaScript教程-捕捉回车键
28. .JavaScript教程-捕捉回车键2
29. .JavaScript教程-void运算符
30. .JavaScript教程-JS的控制语句
31. JavaScript教程-设置和获取文本框的value
32. JavaScript教程-innerHTML和innerText属性
33. .JavaScript教程-正则表达式
34. .JavaScript教程-邮箱地址的正则表达式
35. JavaScript教程-扩展字符串的trim函数
36. .JavaScript教程-回顾JS
37. JavaScript教程-表单验证
38. JavaScript教程-表单验证2
39. JavaScript教程-表单验证3
40. .JavaScript教程-表单验证4
41. .JavaScript教程-复选框的全选和取消全选
42. .JavaScript教程-获取下拉列表选中项的value
43. .JavaScript教程-周期函数setInterval
44. .JavaScript教程-内置支持类Array
45. .JavaScript教程-BOM编程window的open和close
46. .JavaScript教程-BOM编程弹出确认框
47. .JavaScript教程-(补录)-将当前窗口设置为顶级窗口
48. .JavaScript教程-BOM编程history和location对象
49. .JavaScript教程-JSON在开发中的使用
50. .JavaScript教程-JSON在开发中的使用2
51. JavaScript教程-JSON在开发中的使用3
52. .JavaScript教程-JSON在开发中的使用4
53. JavaScript教程-JSON在开发中的使用5
日常工作总会遇到在<a>标签中执行js代码的情况 现在做一个总结,希望对大家有一个帮助。
1、a href="javascript:js_method();"
这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。
W3C标准不推荐在href里面执行javascript语句。
2、a href="javascript:void(0);" onclick="js_method()"
这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
3、a href="javascript:;" onclick="js_method()"
这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。<a href="#"></a> 如果页面有滚动条 点击后网页后返回到页面的最顶端。
4、a href="#" onclick="js_method();return false;"
这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。
*请认真填写需求信息,我们会在24小时内与您取得联系。