脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 扒一扒JavaScript 预解释

扒一扒JavaScript 预解释

 更新时间：2015年01月28日 15:48:46   投稿：hebedich  
这篇文章主要介绍了JavaScript 预解释,包含带var关键字预解释、带function关键字预解释,需要的朋友可以参考下

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

您可能感兴趣的文章:

相关文章

  • JS promise解决异步问题过程详解

    JS promise解决异步问题过程详解

    Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息
    2023-04-04
  • JavaScript中数组嵌套对象排序方法的示例详解

    JavaScript中数组嵌套对象排序方法的示例详解

    在 JavaScript 中,可以使用 sort() 方法对包含嵌套对象的数组进行排序,本文将通过三个简单的示例为大家进行简单的介绍,需要的可以参考下
    2024-03-03
  • js出生日期 年月日级联菜单示例代码

    js出生日期 年月日级联菜单示例代码

    本篇文章主要介绍了js出生日期 年月日级联菜单的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • JavaScript去掉空格的方法集合

    JavaScript去掉空格的方法集合

    JavaScript去掉空格的方法集合，脚本之家以前发布过很多的去除空格的代码，这个更多更全面。
    2010-12-12
  • js简单设置与使用cookie的方法

    js简单设置与使用cookie的方法

    这篇文章主要介绍了js简单设置与使用cookie的方法,以简单实例形式分析了JavaScript设置与调用cookie的方法,需要的朋友可以参考下
    2016-01-01
  • 基于JS实现发送验证码的计时器效果

    基于JS实现发送验证码的计时器效果

    这篇文章主要为大家详细介绍了如何基于JS实现一个发送验证码的计时器效果,文中的示例代码讲解详细,感兴趣的小伙伴快跟随小编一起学习一下吧
    2023-11-11
  • JS将时间秒转换成天小时分钟秒的字符串

    JS将时间秒转换成天小时分钟秒的字符串

    最近小编接到这样的项目需求，接口返回的数据中时间单位为秒，但前端显示的时候需要更人性化的带有单位（天，小时，分钟，秒）的字符串；下面小编给大家带来实例代码，感兴趣的朋友跟随小编一起看看吧
    2019-07-07
  • javascript实现输出指定行数正方形图案的方法

    javascript实现输出指定行数正方形图案的方法

    这篇文章主要介绍了javascript实现输出指定行数正方形图案的方法,可实现javascript获取用户输入及根据输入参数打印图形的功能,需要的朋友可以参考下
    2015-08-08
  • javascript深拷贝的原理与实现方法分析

    javascript深拷贝的原理与实现方法分析

    这篇文章主要介绍了javascript深拷贝的原理与实现方法,简单分析了值传递和引用传递的原理与实现方法,并结合实例形式给出了深拷贝的具体实现技巧,需要的朋友可以参考下
    2017-04-04
  • JSDoc 介绍使用规范JsDoc的使用介绍

    JSDoc 介绍使用规范JsDoc的使用介绍

    JsDoc Toolkit 是一个把js描述格式化成文档的工具。开发者只需按JsDoc的规范写好注释就可以很方便导出文档。它是google 推荐的 JsDoc生成工具。
    2011-02-02

最新评论