扒一扒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-07-29 18:29:19

扒一扒JavaScript 预解释的相关文章

JavaScript预解释是一种毫无节操的机制

前言 JavaScript是一门解释型的语言 , 想要运行JavaScript代码需要两个阶段 编译阶段: 编译阶段就是我们常说的JavaScript预解释(预处理)阶段,在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码 执行阶段: 在编译阶段JavaScript解释器借助执行环境把字节码生成机械码,并从上到下按顺序执行 本文就重点介绍预解释,框架图如下: 一.什么是预解释 预解释:JavaScript代码执行之前,浏览器首先会默认的把所有带var和funct

JavaScript那些事儿-预解释

带var关键字预解释 让我们先看下这段代码执行的结果: alert(n);//弹出undefined var n = 10; 弹出的结果是undefined,为何不是10?让我们再看下面这段代码执行的结果: alert(n); n = 10; 运行报如下错误:,为何这次会报错,原因是代码在运行的时候,没有声明这个变量n:通过这两段代码的比较,我们发现带var关键字和不带var关键字声明的变量是有区别的,带var声明的变量在代码执行之前,似乎浏览器已经给了它们一个初始值undefined,因此我们

课程笔记:——javascript中的预解释2

in:检测某一个属性是否属于这个对象(既可以检测私有的属性,也可以检测公有的属性) --> attr in obj 1.不管条件是否成立,在预解释的时候,判断体中的带var和function的都要进行预解释window下的预解释: var a; -->a=undefined 我们在全局作用域下声明的变量不仅仅是全局变量,也相当于给window增加了一个叫做"a"的属性名 if (!("a" in window)) {//"a" in

课程笔记:——Javascript 中的预解释

1.预解释(变量提升):在当前作用域下,JS代码执行之前,浏览器首先会把所有带var和function关键字的进行提前的声明或者定义var num = 12;声明(declare): var num; -->声明的时候没有赋值,我们的默认值是undefined定义(defined): num=12; 2.带var和带function的预解释不一样:var:在预解释的时候,只声明未定义(只有代码执行的时候才会完成赋值定义)function:在预解释的时候,声明和定义一起完成了(当代码在执行到定义的

做预解释题的一点小方法和小技巧

在JavaScript中的函数理解中预解释是一个比较难懂的话题.原理虽然简单,寥寥数言,但其内涵却有深意,精髓难懂.如何在轻松活跃的头脑中将它学会,现在针对我在学习中的一点小窍门给大家分享一下,希望能给大家一些帮助: 万事需遵循"原理"--"预解释"无节操和"this"指向:(可先看例题解析然后结合原理进行学习) (感谢蕾蕾老师给归纳的预解释无节操原理:) 如果函数传参数则先于以下执行,就相当于在函数私有作用域下var了一个变量:根据作用域原理,

预解释继续。。。。。

接着上篇文章我们继续探讨关于预解释的问题:当预解释的函数问题遇见诸如内存释放结合的时候,我们需要格外小心,我们都知道JavaScript属于弱类型语言,起初只是作为浏览器的脚本语言,现今js的用途变得越来越广泛,但作为一种单线程语言,性能优化则变得尤为重要,什么异步回调,浏览器自身的垃圾回收机制等各种行为都是为了优化性能.扯远了,闲话少说,接下来步入正题.为了更好,更快的地运行代码,我们需要了解内存释放机制: - 内存包含:堆内存和栈内存- 堆内存:用来存放数据的:    + 对象数据类型的  

javascript代码解释执行过程

javascript是由浏览器解释执行的脚本语言,不同于java c,需要先编译后运行,javascript 由浏览器js解释器进行解释执行,总的过程分为两大块,预编译期和执行期 下面的几个demo解释了js解释器对变量和代码的解释过程 //#demo1 foo();//alert(1) function foo(){//声明式函数 alert(1); } foo2();//undefined is not a function var foo2 = function(){//赋值式函数声明,其

我理解的js中预解释

浏览器在执行代码前,先找带var和带function的地方,把带var的声明且赋予初始值undefined,把带function的声明且定义. 带var关键字预解释 让我们先看下这段代码执行的结果: alert(n);//弹出undefined var n = 10; 弹出的结果是undefined,为何不是10?让我们再看下面这段代码执行的结果: alert(n); n = 10; 运行报如下错误: 为何这次会报错,原因是代码在运行的时候,没有声明这个变量n:通过这两段代码的比较,我们发现带v

预解释,作用域,闭包的理解

一.预解释,就是当代码执行的时候.对变量的预声明. 1.第一步是首先会查找带var和function关键字的代码.对其进行预声明的过程.  对var的处理是先声明,然后赋值为undefined  function的处理是声明并赋值.此处的赋值为为function开辟一个新的堆内存空间,用于存储函数体内的字符.注意此处的存储的就是字符串,并非js代码.只有在执行的时候才会转变为js代码. 二.作用域 作用域和函数的定义有关系,和函数的执行没有关系. 三.闭包 闭包其实可以理解为,每一个函数执行都是