为什么说JS预解释是种毫无节操的机制

综合编程 2018-12-07 阅读原文

前言

JavaScript是一门解释型的语言 , 想要运行JavaScript代码需要两个阶段

  • 编译阶段: 编译阶段就是我们常说的JavaScript预解释(预处理)阶段,在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码
  • 执行阶段: 在编译阶段JavaScript解释器借助执行环境把字节码生成机械码,并从上到下按顺序执行

    本文就重点介绍预解释,框架图如下:

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

一、什么是预解释

在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
//前端全栈学习交流圈:866109386
//面向1-3经验年前端开发人员
//帮助突破技术瓶颈,提升思维能力
//例题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;
}
//前端全栈学习交流圈:866109386
//面向1-3经验年前端开发人员
//帮助突破技术瓶颈,提升思维能力

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() 的时候, 报错。

简书

责编内容by:简书阅读原文】。感谢您的支持!

您可能感兴趣的

Mithril.js 1.1.4发布,JavaScript MVC 框架 Mithril.js 1.1.4 发布了,该版本修复了如下bug: Fix IE bug where active element is null causing render function to throw erro...
微信BUG:当页面一直在滚动,js不执行 最近在做一个微站,需要做一个页面效果,当元素出现在屏幕中时,可以看到元素是有一个小变大的动画过程,在模拟器动画流畅的一笔,在手机的浏览器效果也在接受的范围内,但在微信中,效果一塌糊涂。只要不停地上下滚动,页面没有任何的动画效果。 用了一...
How to Do Code Reviews Like a Human (Part Two) This is the second half of my article about how to communicate well and avoid pitfalls in code reviews. Here,...
Delete faakepath when importing the image file fro... This question already has an answer here: How to resolve the C:fakepath? 9 answers I am usi...
JavaScript嵌入式开发:您的下一份工作 我们中的很多人都是从网页开发开始编写JavaScript。就算你是一个服务端的开发人员,专注于Node,想必你也是从编写客户端的JavaScript开始的。我们把JavaScript当做一门与DOM结合非常紧密的语言,或者看做一门轻量级的服...