JavaScript预解释是一种毫无节操的机制
前言
JavaScript是一门解释型的语言 , 想要运行JavaScript代码需要两个阶段
- 编译阶段: 编译阶段就是我们常说的JavaScript预解释(预处理)阶段,在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码
- 执行阶段: 在编译阶段JavaScript解释器借助执行环境把字节码生成机械码,并从上到下按顺序执行
本文就重点介绍预解释,框架图如下:
一、什么是预解释
预解释:JavaScript代码执行之前,浏览器首先会默认的把所有带var和function的进行提前的声明或者定义
1.理解声明和定义
声明(declare):如var num;=>告诉浏览器在全局作用域中有一个num的变量了;如果一个变量只是声明了但是没有赋值,默认的值是undefined
定义(defined):如num=12;=>给我们的变量进行赋值。
2.对于带var和function关键字的在预解释的时候操作不一样的
var =>在预解释的时候只是提前的声明
function =>在预解释的时候提前的声明+定义都完成了
3.预解释只发生在当前的作用域下。
例如:开始只对window下的进行预解释,只有函数执行的时候才会对函数中的进行预解释
二、作用域链
1.如何区分私有变量和全局变量?
1)在全局作用域下声明(预解释的时候)的变量是全局变量
2)只有函数执行会产生私有的作用域,比如for(){}、if(){}和switch(){}都不会产生私有作用域
3)在"私有作用域中声明的变量(var 声明)"和"函数的形参"都是私有的变量。在私有作用域中,代码执行的时保遇到了一个变量,首先我们需要确定它是否为私有的变量,如果是私有的变量,那么和外面的没有在何的关系;如果不是私有的,则往当前作用域的上级作用域进行查找,如果上级作用域也没有则继续查找,一直找到window为止,这就是作用域链。
我们举个例子来区别私有变量和全局变量:
//=>变量提升:var a;var b;var c;test=AAAFFF111;
var a=10,b=11,c=12;
function test(a){
//=>私有作用域:a=10 var b;
a=1;//=>私有变量a=1
var b=2;//=>私有变量b=2
c=3;//=>全局变量c=3
}
test(10);
console.log(a);//10
console.log(b);//11
console.log(c);//3
判断是否是私有变量一个标准就是是否是在函数中var声明的变量和函数的形参都是私有的变量。本道题目在test函数中a是形参和var b定义的变量b都是私有变量。
2.函数传参
这是因为当函数执行的时候,首先会形成一个新的私有的作用域,然后按照如下的步骤执行:
1)如果有形参,先给形参赋值
2)进行私有作用域中的预解释
3)私有作用域中的代码从上到下执行
我们来看一道例题
var total=0;
function fn(num1,num2){
console.log(total);//->undefined 外面修改不了私有的
var total=num1 +num2;
console.log(total);//->300
}
fn(100,200);
console.log(total);//->0 私有的也修改不了外面的
3.JS中内存的分类
栈内存:用来提供一个供JS代码执行的环境,即作用域(全局作用域/私有的作用域)
堆内存:用来存储引用数据类型的值。对象存储的是属性名和属性值,函数存储的是代码字符串。
三、全局作用域下带var和不带var的区别
我们先来看以下两个例子:
//例题1
console.log(num);//->undefined
var num=12;
//例题2
console.log(num2);//->Uncaught ReferenceError:num2 is not defined
num2=12;//不能预解释
当你看到var num=12时,可能会认为只是个声明。但JavaScript实际上会将其看成两条声明语句:var num;和 num=12;第一个定义声明是在预解释阶段进行的。第二个赋值声明会被留在原地等待执行阶段。num2=12 相当于给window增加了一个叫做num2的属性名,属性值是12;而var num=12 首先它相当于给全局作用域增加了一个全局变量num,它也相当于给window增加了一个属性名num2,属性值是12。两者最大区别:带var的可以进行预解释,所以在赋值的前面执行不会报错;不带var的是不能进行预解释的,在前面执行会报错;
接下来我们举例说明:
//例题1
var total=0;
function fn(){
console.log(total);//undefined
var total=100;
}
fn();
console.log(total);//0
//例题2
var total=0;
function fn(){
console.log(total);//0
total=100;
}
fn();
console.log(total);//100
例题1中带var变量在私有作用域中可以预解释,所以第一个console打出来的值为undefined。私有作用域中出现的一个变量不是私有的,则往上级作用域进行查找,上级没有则继续向上查找,一直找到window为止,例题2中不带var变量不是私有的,所以往上级找
四、预解释五大毫无节操的表现
1.预解释的时候不管你的条件是否成立,都要把带var的进行提前的声明。
请看下面这道例题:
if(!("num" in window)){
var num=12;//这句话会被提到大括号之外的全局作用域:var num;->window.num;
}
console.log(num);//undefined
2.预解释的时候只预解释”=”左边的,右边的值,不参与预解释
请看下面这道例题:
fn();//报错
var fn=function (){ //window下的预解释:var fn;
console.log("ok");
};
3.自执行函数:定义和执行一起完成了。
自执行函数定义的那个function在全局作用域下不进行预解释,当代码执行到这个位置的时候定义和执行一起完成了。常见有以下几种形式:
(function(num){})(10);
~function(num){}(10);
+function(num){}(10);
-function(num){}(10);
!function(num){}(10);
4.函数体中return下面的代码虽然不再执行了,但是需要进行预解释;return后面跟着的都是我们返回的值,所以不进行预解释;
function fn(){
//预解释:var num;
console.log(num);//->undefined
return function(){};
var num=100;
}
5.函数声明和变量声明都会被提升。但是一个值得注意的细节(这个细节可以出现在有多个“重复”声明的代码中)是函数会首先被提升,然后才是变量。在预解释的时候,如果名字已经声明过了,不需要从新的声明,但是需要重新的赋值;
我们先来看下两个简单的例子:
//例题1
function a() {}
var a
console.log(typeof a)//'function'
//例题2
var c = 1
function c(c) {
console.log(c)
var c = 3
}
c(2)//Uncaught TypeError: c is not a function
当遇到存在函数声明和变量声明都会被提升的情况,函数声明优先级比较高,最后变量声明会被函数声明所覆盖,但是可以重新赋值,所以上个例子可以等价为
function c(c) {
console.log(c)
var c = 3
}
c = 1
c(2)
接下来我们看下两道比较复杂的题目:
//例题3
fn();
function fn(){console.log(1);};
fn();
var fn=10;
fn();
function fn(){console.log(2);};
fn();
1.一开始预解释,函数声明和赋值一起来,fn 就是function fn(){console.log(1);};遇到var fn=10;不会重新再声明,但是遇到function fn(){console.log(2);}就会从重新赋值,所以一开始fn()的值就是2
2.再执行fn();值不变还是2
3.fn重新赋值为10,所以运行fn()时报错,接下去的语句就没再执行。
//例题4
alert(a);
a();
var a=3;
function a(){
alert(10)
}
alert(a);
a=6;
a()
1.函数声明优先于变量声明,预解释时候,函数声明和赋值一起来,a就是function a(){alert(10)} ,后面遇到var a=3,也无需再重复声明,所以先弹出function a(){alert(10)}
2.a(),执行函数,然后弹出10
3.接着执行了var a=3; 所以alert(a)就是显示3
4.由于a不是一个函数了,所以往下在执行到a()的时候, 报错。
参考文章
JavaScript中的预解析
js作用域其二:预解析
来源:https://segmentfault.com/a/1190000017032008
JavaScript预解释是一种毫无节操的机制的更多相关文章
- javascript预解释中的机制
预解释是一种毫无节操的机制(自从学了预解释,从此节操是路人) in:‘num’ in window 判断num是否为window这个对象的一个属性,是的话返回true,不是返回false 1.预解释的 ...
- 扒一扒JavaScript 预解释
带var关键字预解释 让我们先看下这段代码执行的结果: 代码如下: alert(n);//弹出undefinedvar n = 10; 弹出的结果是undefined,为何不是10?让我们再看下面这段 ...
- JavaScript提高篇之预解释作用域以及this原理及其应用
1.预解释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 我理解的js中预解释
浏览器在执行代码前,先找带var和带function的地方,把带var的声明且赋予初始值undefined,把带function的声明且定义. 带var关键字预解释 让我们先看下这段代码执行的结果: ...
- [js]js中4种无节操的预解释情况
js中4种无节操的预解释情况 - 1. if语句即使条件不成立,条件里的表达式也会进行预解释. - 2. 匿名函数的预解释: 只对等号左边与解释 - 3. 自执行函数的预解释: 不进行预就解释, 执行 ...
- 课程笔记:——javascript中的预解释2
in:检测某一个属性是否属于这个对象(既可以检测私有的属性,也可以检测公有的属性) --> attr in obj 1.不管条件是否成立,在预解释的时候,判断体中的带var和function的都 ...
- 课程笔记:——Javascript 中的预解释1
1.预解释(变量提升):在当前作用域下,JS代码执行之前,浏览器首先会把所有带var和function关键字的进行提前的声明或者定义var num = 12;声明(declare): var num; ...
- 关于javascript中私有作用域的预解释
1.如何区分私有变量还是全局变量 1).在全局作用域下声明(预解释的时候)的变量是全局变量 2).在“私有作用域中声明的变量”和“函数的形参”都是私有变量 在私有作用域中,我们代码执行的时候遇到一个变 ...
- 关于JavaScript预编译和执行顺序以及函数引用类型的思考
昨晚在对项目中的一部分做模块化处理的时候,遇到了一个问题,一个重新定义的function对一个通用类中的function进行赋值覆盖的时候,失败了.问题抽象出来是这样的: <script > ...
随机推荐
- 关于IIS的IUSER和IWAM帐户
IUSER是Internet 来宾帐户匿名访问 Internet 信息服务的内置帐户 IWAM是启动 IIS 进程帐户用于启动进程外的应用程序的 Internet 信息服务的内置帐户 (在白吃点就是启 ...
- k8s学习(二)——etcdctl工具的使用
k8s的实现核心实际上就是通过读写etcd数据库实现对资源的存储,管理和控制. k8s所有资源的本源都是存储在etcd中的一个个键值对. 理论上可以观察到etcd数据库中的数据变化.具体的使用方式如下 ...
- zabbix学习系列之触发器
触发器的简介 监控项仅负责收集数据,而通常收集数据的目的还包括在某指标对应的数据超出合理范围时给相关人员发送告警信息,"触发器"正式 用于为监控项所收集的数据定义阈值 每一个触发器 ...
- oracle手动修改listener.ora和tnsnames.ora之后竟然无效
oracle手动修改listener.ora和tnsnames.ora之后竟然无效 花式重启都没有生效,需要使用Net Configuration Assistant来进行刷一下,重新生成的监听还是一 ...
- 微信小程序 - 答题进度条
关于进度条的话,我是使用官方原生的progress的. 关于进度progress接受保留2位小数(从后端获取到平均值,再item循环出来) js wxml
- 防止vue组件渲染不更新
1.key <el-dialog title="" :visible.sync="dialogVisible" @close="dialogCl ...
- SAS连接MYSQL的步骤及引用数据表
1.建立逻辑库 libname dz ’物理路径'; 2.逻辑库做为桥梁连接SAS与MYSQL libname dz MYSQL USER=***** PASSWORD=**** DATABA ...
- sql 查询 一张表里面的数据 在另一张表中是否存在 和 比对两个集合中的差集和交集(原创)
这两天在搞一个修复的小功能 需求: A表,B表,C表,日志文件 先筛选出A表和B表中都符合条件的数据,然后检查这些数据在C表中是否存在.如果不存在,就从日志中读取数据,存入C表中,如果存在,则不做操作 ...
- 转:office 2016最新安装及激活教程(KMS)
office 2016最新安装及激活教程(KMS)[亲测有效]!! win7激活教程 博主的一个朋友,咳咳……你们懂得,想装office,于是我就上网找了一下激活的方法,亲测有效,而且也没有什么广 ...
- 也谈SQL Server 2008 处理隐式数据类型转换在运行计划中的增强 (续)
在上一篇文章也谈SQL Server 2008 处理隐式数据类型转换在运行计划中的增强中,我提到了隐式数据类型转换添加对于数据分布非常不平均的表.评估的数据行数与实际值有非常大出入的问题,进一步測试之 ...