为什么说JavaScript预解释是一种毫无节操的机制详
前言
JavaScript是一门解释型的语言 , 想要运行JavaScript代码需要两个阶段
- 编译阶段: 编译阶段就是我们常说的JavaScript预解释(预处理)阶段,在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码
- 执行阶段: 在编译阶段JavaScript解释器借助执行环境把字节码生成机械码,并从上到下按顺序执行
本文就重点介绍预解释,框架图如下
一、什么是预解释
在js中,带var 和function关键字的需要预解释
那什么是预解释?就是在js代码执行之前,先申明好带有var 关键字和带有function关键字的变量,在内存里先安排好。
预解释: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的进行提前的声明。
请看狼蚁网站SEO优化这道例题
if(!("num" in window)){ var num=12;//这句话会被提到大括号之外的全局作用域var num;->window.num; } console.log(num);//undefined
2.预解释的时候只预解释”=”左边的,右边的值,不参与预解释
请看狼蚁网站SEO优化这道例题
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狼蚁网站SEO优化的代码虽然不再执行了,需要进行预解释;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()
的时候, 报错。
参考文章
- http://heartwalker./2016/04/04/js作用域其二-预解析/
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对狼蚁SEO的支持。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程