javascript编译与运行的几个实验
在开始写博文之前,我必须要提一句:我是一个很菜很菜的菜鸟。不过我一直在通过自己的学习与积累,让自己变得强大。由于我的语言组织能力水平不堪一击,于是,如果你是一位希望看到优美文字的coder,我只希望你勿喷。而我的见解也是很有限的,希望大神们看了多多提意见,让我这位在迷途中的菜鸟有个改变的方向。好了,接下来进入主题。
最近我在看朱印宏老师主编的《javascript 征途》这一本巨作,由于是巨作,而我这种菜鸟自然看起来会很吃力了。所以我咬着牙,不算完整的看了一遍。但我晚上缓过神来打算照着书上的实例来研究一下闭包这个让我各种忧伤,各种糊里糊涂的章节时。我突然发现对于var的作用域我已经迷途了。于是我找了下度娘,看她是否你知道迷津。于是我找到园中的洞庭啸月 的这一篇javascript中的var浅析一文,经过上上下下看了几遍,我终于有了一些拨开云雾了。一下为我自己的一些实验,其中包含着我对闭包现在的理解,以及javascript解析机制的理解。
先来个最简单的:
1 f5(); //调用f5(),f5函数定于在window这个全局作用域之中。结果:5 2 alert(b); //结果:undefined 3 var b = 0; //定于全局变量 b=0 4 alert(b); //结果:1 5 function f5() { 6 7 b = 5; //起到覆盖的作用 8 9 alert(b); 10 11 }
通过上面的实验我们可以看出在函数和变量在javascript是经历过预编译期和执行期两个过程的。以下为朱印宏老师主编的《javascript 征途》书中的原话:“在预编译期,使用var语句声明的变量和使用function语句声明的函数都会被处理。但是,javascript 解释器只是对var语句声明的变量进行索引,变量的初始化值却被忽略,直到执行期时才去为变量读取初始值。而对于function语句创建的函数,javascript解释器不仅对函数名称按变量标识进行索引,而且对函数提前进行了处理。于是在预编译期,同名的变量被后来的变量所覆盖。”
上面这些只要懂一点点javascript的人应该就能懂了。
接下来我上一段让人迷糊的代码;
javascript代码:
1 var b = 0; 2 function f1() { 3 alert(b); 4 var b = 1; 5 f2 = function () { 6 var b = 2; 7 alert(b); 8 f6 = function () { 9 alert(b); 10 } 11 } 12 f3 = function () { 13 alert(b); 14 b = 3; 15 16 } 17 f4= function () { 18 alert(b); 19 } 20 }
HTML代码:
<div><button onclick="f1()">f1()</button><button onclick="f2()">f2()</button><button onclick="f3()">f3()</button><button onclick="f4()">f4()</button><button onclick="f6()">f6()</button></div>
有趣的是在按钮中点顺序如果发生变化会出现多种不同的结果:
第一种:1,2,3,4,6这对应的结果为:undefined,2,1,3,2
第二种:不点击1,直接点击2,3,4,6。则没有什么反应,通过调用firebug我们可以看到都是出现了如下错误提示:
ReferenceError: f6 is not defined
上面的对比我们可以看出:闭包的内部第一层函数执行过程。首先函数f1()预编译,当执行过一遍f1()之后,f1()这个函数的内部函数执行时才会被触发,这如同,你要得到蛋黄你一定要先把蛋壳给打破了才能一样。(ps:这边存在一些问题,我对闭包至今还是迷糊的,上面的描述可能存在问题,希望懂的人给点指示。而上面的比喻只是我的愚见。)
第三种:1,不点击2,接着点击,6 。结果为:undefined,报错:
ReferenceError: f6 is not defined
第四种:1,2,6 结果为:undefined,2,2
综合上面三、四两种我们可以看出:如果只是执行了f1()但是不执行f2()这时会出现嵌套在f2()内部的f6()还是不能执行,因此我们。单击f6()会报错。所以javascript的对于嵌套的函数就像剥洋葱一样,想要运行里面的就一定要先运行包裹着它的那一层。因此,如果没有错误的话,javascript对于function的声明只是预编译全局作用域的。(这边包含,闭包的知识,由于我不了解就不用闭包这个词语了。)
第五种:点击1,4 。结果:undefined,1。
第六种:点击1,3,4.。结果为:undefined,1,3。
第七种:单击1,4,3,4,3。结果为:undefined,1,1,3,3。
通过五、六、七这三个比较我们可以得出这样一个结论:其实函数内的变量都是先定义,后赋值的,不管定义变量的语句写在何处。而且要明白,在函数外面定义变量的时候,有没有var都无所谓,在函数内部定义变量,如果前面有var就代表是函数内的局部变量,否则为调用全局变量。(此话来之javascript中的var浅析)
转载于:https://www.cnblogs.com/90joyce/archive/2013/04/01/2994229.html
javascript编译与运行的几个实验相关推荐
- javascript编译与运行机理(1)--
随着学习js的深入就越想了解其内部的运行机理,看了很多文章,感觉下面总结的不错.但囿于个人水平,只是达到了理解层面,还不能提出自己的见解,只好把资料罗列出来,留待以后总结: 1.Javascript的 ...
- PHP中间件ICE,ICE的安装配置,ICE常见编译和运行(异常)错误(自测Php版本安装部分,因为php版本跟ice版本不一样失败)
ICE(Internet Communications Engine)是Zeroc提供的一款高性能的中间件.使用ICE能使得php(或c++,java,python)与java,c++,.net,py ...
- Java 跨平台运行机理:Dos 命令在桌面新建文件夹,并在其中编译、运行一段 Java 程序
文章目录 前言 一.打开 Dos 命令界面 二.Dos 查看桌面文件目录序列 三.Dos 创建文件夹 四.相关 Windows 系统 Shell 命令补充 五.Dos 进入文件夹编写 Java 文件 ...
- JavaScript 是怎么运行起来的?
关注公众号 前端开发博客,领27本电子书 回复加群,自助秒进前端群 JavaScript 的运行原理,是我面试的时候经常会问到的问题,但是根据过往的面试结果来看,这部分能理解的很清楚的不足 20%,大 ...
- 读的, 且经过美化, 能在所有 JavaScript 环境中运行, 并且应该和对应手写的 JavaScript 一样快或者更快.
目录 试一试 CoffeeScript 代码和注释 CoffeeScript 是一门编译到 JavaScript 的小巧语言. 在 Java 般笨拙的外表下, JavaScript 其实有着一颗华丽的 ...
- 前端架构设计第六课工程化构建、编译、运行
12 如何理解 AST 实现和编译原理? 经常留意前端开发技术的同学一定对 AST 技术不陌生.AST 技术是现代化前端基建和工程化建设的基石:Babel.Webpack.ESLint.代码压缩工具等 ...
- Linux下开启openmp编译,OpenMP程序的编译和运行
<OpenMP程序的编译和运行>由会员分享,可在线阅读,更多相关<OpenMP程序的编译和运行(13页珍藏版)>请在人人文库网上搜索. 1.SHANGHAI UNIVERSIT ...
- 笔记:JavaScript编译与执行
1.js的编译与执行.事件循环 单线程语言 JavaScript是单线程语言,即在浏览器中一个页面只有一个线程在执行js代码. 进程和线程 假设我们有一家工厂(进程),那么 工厂所拥有的独立资源就相当 ...
- 实现微信小程序编译和运行环境系列(初始篇)
实现微信小程序编译和运行环境系列(初始篇) 前言 最近一段时间在研究实现微信小程序和小游戏编译打包和运行环境平台开发 目前基本可以支持微信基础库2.8.2功能迭代了 所以想通过记录分享一下自己的认知过 ...
最新文章
- 【R】神经网络相关的R包
- 【Java 虚拟机原理】Java 引用类型 ( 强引用 | 软引用 | 弱引用 | 虚引用 | 静态变量 )
- 记录层序遍历中每层右侧第一个数字 Binary Tree Right Side View
- Ipython知识点总结
- 绕固定轴分解_3轴 / 5轴 / 3+2到底是什么......??
- 自适应滤波器设计及matlab实现,(终稿)自适应滤波器设计及Matlab实现.doc(OK版)...
- 从基础到实践,一文带你看懂HashMap
- 靠着零代码报表工具,转行报表开发后月薪超过3万
- 使用NodeJS调用Dubbo工程
- Android 图片处理方法大全
- 直接安装的Qt 5如何调试到源码中
- Java I/O 进化之路、传统 BIO 编程
- 计算机组装常用工具有锤子,工具箱中常用的五金工具有哪些?
- SpringDataJPA调用存储过程实例
- python爬虫代理教程_Python代理IP爬虫的新手使用教程
- 说说“安规”的那些事儿
- 解决Android Studio的ADB连接不到手机问题
- npm-shrinkwrap
- 文本搜索引擎Lucene之filed详解和代码测试
- IAM统一身份认证服务