扒一扒JavaScript 预解释_javascript技巧

带var关键字预解释

让我们先看下这段代码执行的结果:

复制代码 代码如下:

alert(n);//弹出undefined
var n = 10;

弹出的结果是undefined,为何不是10?让我们再看下面这段代码执行的结果:

复制代码 代码如下:

alert(n);
n = 10;

运行报如下错误:

为何这次会报错,原因是代码在运行的时候,没有声明这个变量n;通过这两段代码的比较,我们发现带var关键字和不带var关键字声明的变量是有区别的,带var声明的变量在代码执行之前,似乎浏览器已经给了它们一个初始值undefined,因此我们将代码执行前,浏览器引擎自动扫描带var关键字和带function关键字(后面会提到)声明的变量和定义的函数的这个过程称为预解释。

带function关键字预解释

让我们看下如下代码执行的结果:

复制代码 代码如下:

fn();//弹出hello
function fn(){
    alert('hello');
}

执行结果弹出hello,fn能够正常执行,原因是在代码执行前fn被预解释了,在预解释时已经将fn定义(defined)了,我们又有疑问了,为何第一段代码执行结果不弹出10,而是undefined,再次引入了另一个概念JavaScript中的声明和定义。

JavaScript中的声明(declare)和定义(defined)

我们通常用var关键来声明变量,用function关键字来定义函数,只不过function关键字声明和定义函数是同时执行的,而var它只能声明变量,并不具备定义的功能。

如下是用var关键字声明的变量:

复制代码 代码如下:

var n;//声明了一个变量n
var m = 10;//声明了一个变量m,并且将10赋值给它

如下是用function关键字定义的函数:

复制代码 代码如下:

//定义了一个函数fn
function fn(){
    alert('hello');
}

带var关键字和带function关键字预解释的区别

其实它俩的区别就是带var关键字预解释时只预解释声明部分(因为它本身不具备定义的能力),而带function关键字在预解释时声明和定义同时被预解释。这时我们再回头分析下第一段代码,分析如下:

无节操(坑爹)的预解释

为何说它无节操,请看下面的代码(火狐除外):

复制代码 代码如下:

alert(n);
fn();
if(false) {
    var n = 10;
    function fn(){
        alert('hello');
    }
}

第一行代码执行会弹出undefined,第二行代码执行会弹出hello;是因为n和fn在代码执行前被预解释了,即使if条件判断为false,执着的浏览器引擎也会将带var关键字声明的变量n和带function关键定义的fn扫描到。

*预解释忽略重新声明,不忽略重新定义

这个地方因为相对比较绕而且不太好理解,所以加了一个星号,请看如下代码:

复制代码 代码如下:

alert(n);
var n = 10;
var n = 9;
var n;
alert(n);

这段代码执行结果是什么,我们来分析一下:

继续上代码,请分析如下执行结果:

复制代码 代码如下:

fn();
function fn() {
    alert('1');
}
fn();
function fn() {
    alert('2');
}
fn();

代码分析图如下:

带function定义的函数预解释分析

总结:

本篇博文用了大篇幅代码和截图对JavaScript中预解释作了概述,纵观各种书籍对预解释的描述甚少,其实平时在工作中使用的场景也并不多,遗憾的是预解释是各大公司面试题必考。在刚开始接触它的时候,感觉它总是不按照常理写代码,但是有些时候却能够正常运行并不会报错,当然这也增加了我们对它神秘感的探索,也让我们进一步了解浏览器引擎是怎么解释执行我们的代码。特此在后面的博文中我会拿几道经典的案例来综合分析它,再次感谢大家的支持!

时间: 2024-09-13 12:17:01

扒一扒JavaScript 预解释_javascript技巧的相关文章

理解 JavaScript 预解析_javascript技巧

事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,JavaScript有"预解析"行为.理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在.为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript"预解析",如果我的见解有误,还望指正. (1)如果JavaScript仅是运行时自上往下逐句解析的,下面的代码能正确运行是可以理解的,因为我们先

JavaScript File API实现文件上传预览_javascript技巧

一.概述以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽相

简短几句 通俗解释javascript的闭包_javascript技巧

何谓没有被释放资源的栈区和预执行的过程,用一个最常见的示例来解释: 比方现在我们有一个ul,下面有很多个li,需要遍历他们为他们绑定单击事件,并在点击后将当前下标传递给另外一个function来进行额外的处理: 复制代码 代码如下: for(var i=0; i<agroup.length; i++) { agroup[i].onclick = function() { handler(i); } } 执行结果显而易见对吧?在handler中,获取传递过去的参数i,你看到的将全部是最大的下标,这

JavaScript File API文件上传预览_javascript技巧

对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览

Javascript 面向对象特性_javascript技巧

1. JavaScript中的类型 -------- 虽然JavaScript是一个基于对象的语言,但对象(Object)在JavaScript中不是第一型的.JS 是以函数(Function)为第一型的语言.这样说,不但是因为JS中的函数具有高级语言中的函 数的各种特性,而且也因为在JS中,Object也是由函数来实现的.--关于这一点,可以在 后文中"构造与析构"部分看到更进一步的说明. JS中是弱类型的,他的内置类型简单而且清晰: ------------------------

Javascript函数式编程语言_javascript技巧

函数式编程语言 函数式编程语言是那些方便于使用函数式编程范式的语言.简单来说,如果具备函数式编程所需的特征, 它就可以被称为函数式语言.在多数情况下,编程的风格实际上决定了一个程序是否是函数式的. 是什么让一个语言具有函数式特征? 函数式编程无法用C语言来实现.函数式编程也无法用Java来实现(不包括那些通过大量变通手段实现的近似函数式编程). 这些语言不包含支持函数式编程的结构.他们是纯面向对象的.严格非函数式的语言. 同时,纯函数语言也无法使用面向对象编程,比如Scheme.Haskell以

javascript操作表格_javascript技巧

Power Table"; else if(the_td.children.length==1 && the_td.children[0].tagName.toLowerCase()!="div") the_td.innerHTML="" + the_td.innerHTML + ""; cur_cell.children[0].contentEditable = true; with(cur_cell.children

写给小白的JavaScript引擎指南_javascript技巧

关于本文标题,我并不认为参与写或者读本文的人是白痴.但是有时某个话题会让你觉得自己就像个白痴一样,而 JavaScript 引擎就是这些话题之一,至少对于我来说是这样. 有时编写 Web 应用的代码会感觉充满魔力,因为我们只是写了一系列字符,就能在浏览器里看到效果了.但是理解魔法背后的技术,可以帮助你更好地提高编程技巧.至少当你试图解释在 JavaScript 驱动的 web 或移动应用的幕后发生了什么的时候,会觉得自己不那么白痴了. 很多年前,那是我还是个研究生讲师,向一个教授抱怨还没有掌握那

多种方式实现js图片预览_javascript技巧

先贴代码,之后完善: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta n