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

更新日期: 2018-11-16阅读量: 1592标签: 机制作者: 浪里行舟


一、什么是预解释

js代码执行之前,浏览器首先会默认的把所有带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 num=12与num=12有啥区别?

我们先来看以下两个例子:

//例题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;第一个定义声明是在预解释阶段进行的。第二个赋值声明会被留在原地等待执行阶段。

**最大区别:带var的可以进行预解释,所以在赋值的前面执行不会报错;不带var的是不能
进行预解释的,在前面执行会报错;**
除此之外,num2=12;相当于给window增加了一个叫做num2的属性名,属性值是12
而var num=12;首先它相当于给全局作用域增加了一个全局变量num,它也相当于给window增加了一个属性名num2,属性值是12。

接下来我们举例说明:

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


来源:https://segmentfault.com/a/1190000017032008


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1353

小程序的更新机制_如何实现强制更新?

在讲小程序的更新机制之前,我们需要先了解小程序的2种启动模式,分别为:冷启动和热启动。小程序不同的启动方式,对应的更新情况不不一样的。无论冷启动,还是热启动。小程序都不会马上更新的,如果我们需要强制更新,需要如何实现呢?

几道面试题来看JavaScript执行机制

根据 JavaScript 的运行环境,锁定它为单线程,任务需要排队执行,如果网站资源比较大,这样会导致浏览器加载会很慢,但实际上并没有,大家肯定立刻想到了同步和异步。所谓的同步和异步也是在排队,只是排队的地方不同。

weakSet垃圾回收机制

如果其它对象没有引用该对象,垃圾回收机制会自动回收该对象所占的内存,不会考虑该对象是否还在WeakSet对象中。 正是由于以上特性,WeakSet中的成员对象会随时消失(垃圾回收机制运行前后可能会不同)

浅出Vue 错误处理机制errorCaptured、errorHandler

JavaScript本身是一个弱类型语言,项目中容易发生错误,做好网页错误监控,能帮助开发者迅速定位问题,保证线上稳定。vue项目需接入公司内部监控平台,本人之前vue errorHooks不甚了解, 决定探一探

简单梳理Redux的源码与运行机制

前几天写了一篇react另一个状态管理工具Unstated的源码解析。开启了我的看源码之路。想一想用了好长时间的redux,但从没有深究过原理,遇到报错更是懵逼,所以就啃了一遍它的源码,写了这篇文章,

从 javascript 事件循环看 Vue.nextTick 的原理和执行机制

Vue 的特点之一就是响应式,但是有些时候数据更新了,我们看到页面上的 DOM 并没有立刻更新。如果我们需要在 DOM 更新之后再执行一段代码时,可以借助 nextTick 实现。

浅谈小程序运行机制

接触小程序有一段时间了,总得来说小程序开发门槛比较低,但其中基本的运行机制和原理还是要懂的。“比如我在面试的时候问到一个关于小程序的问题,问小程序有window对象吗?

JavaScript运行机制浅析

输出结果是undefined, 这种现象被称成“预解析”:JavaScript引擎会优先解析var变量和function定义。在预解析完成后,才会执行代码。如果一个文档流中包含多个script代码段(用script标签分隔的js代码或引入的js文件)

关于JS垃圾回收机制

由于字符串、对象和数组没有固定大小,所以当它们的大小已知时,才能对它们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。

React Fiber的优先级调度机制与事件系统

经典的事件系统分成两大块,绑定事件与分派事件,在浏览器中,分派事件很少人会直接dispatchEvent。因为创建一个DOM 事件是非常复杂的事情,不同的事件对象对应不同的事件构造器,传参也五花八门 ​

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!