抱歉,你查看的文章不存在

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

本文框架图

什么是预解释

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
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()时报错,接下去的语句就没再执行。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

前端学习心得

2 篇文章25 人订阅

相关文章

来自专栏一个爱吃西瓜的程序员

Python基础学习-操作列表

一 :遍历整个列表 1:使用for循环来遍历列表: 例: ? 输出: ? 二:避免缩进错误 1:Python根据缩进来判断代码行与前一个代码行的关系。 2:...

2864
来自专栏python3

python3--元组(tuple),列表(list),字典dict,其它(for,enumerate,range)

元组被称为只读列表,即数据可以被查询,但不能被修改,所以,字符串的切片操作同样适用于元组

2261
来自专栏听雨堂

JavaScript大略

 简介: javascript是一种基于对象和事件驱动并具有安全性能的脚本语言。 它是通过嵌入或调入在标准的HTML语言中实现的。 数据类型:   St...

18110
来自专栏阿凯的Excel

Python读书笔记12(IF语句应用)

今天和大家分享的是所有函数、所有编程的基础,判断! IF语句! IF语句肯定是进行判断,为真怎样,为假如何。 那这个真假就是某个条件是否满足,和Python相...

3729
来自专栏黑泽君的专栏

java中,方法参数是基本类型和引用类型的区别

当参数是基本类型时,在调用方法时将值传递到方法中,运行方法,运行结束方法退出,对原本main中定义的变量没有任何操作(方法中没有return)。即:此时只跟栈有...

1662
来自专栏pangguoming

理解js中的new

new 操作符 在有上面的基础概念的介绍之后,在加上new操作符,我们就能完成传统面向对象的class + new的方式创建对象,在Javascript中,我们...

4024
来自专栏编程

机器学习之Python基础(一)

标题 Python语言特点 基本数据类型 循环 文件IO 函数 1 1 1 Python是一种面向对象的解释型计算机程序设计语言。它有着代码简洁、可读性强的特点...

1988
来自专栏编程理解

正则表达式(二):断言

上面的例子反映了一个明显的正则匹配规则:贪婪匹配,即在符合正则表达式规则的情况下,总会匹配尽量多内容。 如果想使得正则表达式按最小内容匹配,只需要在次数元符号...

4111
来自专栏我和我大前端的故事

初探 TypeScript函数基本类型泛型接口类内置对象

前段时间有朋友和我推荐 TypeScript ,他说写起来特别爽,让我去试一试,那时候我还在那是啥高深莫测的东西。刚好那段时间忙,一直没有时间看。最近也很忙,还...

5752
来自专栏cs

python的顺序程序设计

赋值 同步赋值:变量1,变量2,....变量n=表达式1,表达式2,.....表达式n 同步赋值首先计算右边n个表达式的值,然后同时将表达式的值赋给左边的n...

4216

扫码关注云+社区

领取腾讯云代金券