js进阶系列(四)-提升

/ 0评 / 0

看到这里,我相信你已经知道了作用域的概念了,以及根据声明的位置和方式将变量分配给作用域的相关原理了。函数作用域和块作用域的行为是一样的,可以总结为:任何声明在某个作用域内的变量,都将附属于这个作用域。

首先我们上个例子

console.log(a);
console.log(foo);
var a=1;

function foo(){
 console.log(2);
}

如果你还不知道答案或者不确定,那我相信下面的内容一定会让你有收获。首先我们来回顾一下作用域的一些知识,引擎会在解释JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明,并用合适的作用域将它们关联起来。也就是词法作用域的核心,所以包含所有声明的变量或者声明的函数在执行之前都会先被处理。

var a=1;

比如声明一个变量并赋值为1,表面上看只是一个声明,实际上。js会看处理成两个声明,var  a和a=1,第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。

var a     //编译阶段
a=1      //代码执行阶段

 也就是变量和函数感觉在执行之前已经被处理过了,这个过程就好像变量和函数声明从它们在代码中出现的位置被“移动”到了最上面。这个过程就叫作提升。但是要牢牢记住:只有被声明的函数或者变量才会被提升,也就是只有声明本身会被提升,而赋值或其他运行逻辑会留在原地等待代码执行。那有个疑问?就是变量提升了,为什么值回事undefined,而函数提升了,确实整个函数都有值。

foo()    //1
function foo(){
    console.log(1);
}
console.log(a);   //undefined
var a=1;

实际上,函数声明和变量声明都会被提升。但是一个值得注意的细节(这个细节可以出现在有多个“重复”声明的代码中)是函数会首先被提升,然后才是变量。这里引进一个新的概念,执行上下文:每次当引擎执行到可执行代码的时候,就会进入一个创建一个执行上下文。我们可以理解为,执行上下文就是代码的执行环境,会形成一个作用域。

首先在这个执行上下文的创建阶段和代码执行阶段

创建阶段,会创建变量对象,建立作用域链,以及确定this的指向。

首先我们需要理解下变量对象(Variable Object)VO,可以这样理解,变量对象就是相当于一个容器,它会做几件事情

1).创建arguments对象。搜索当前上下文中的参数,确定该对象下的属性与属性值。

2).检查当前上下文的function关键字声明的函数,找到之后给当前那个函数赋予一个引用,该引用指向该函数所在内存地址的引用,如果函数名的属性已经存在过,那么该属性将会被最新新的引用所覆盖。之后继续检查当前上下文中的var 变量声明,每找到一个变量声明,就在变量对象中给变量一个属性,属性值为undefined。如果存在同名属性,为了防止同名的函数被修改为undefined,则会直接跳过,原属性值不会被修改。

这种形式也就是为什么变量声明和函数声明中,函数声明会比变量声明要提前,也就是函数优先。

代码执行阶段:变量对象会变成活动对象(Active Object)AO,此时会做几件事情:变量会进行赋值,函数引用,执行其他代码

当然,这里要注意函数参数的提升,实际上函数参数是一个隐式的提升和赋值操作。

function foo (a){
   //函数参数进行隐式赋值    var a ;  a=2;
   console.log(a);
}
foo(2);

下面在看下代码就知道为什么会那样执行了。

foo();   //在变量对象创建阶段,也就是代码执行之前,foo已经有了自己在内存空间的函数引用了,所有函数会执行  输出  1
function foo(){
   console.log(1);
}
console.log(a);  //在变量对象创建阶段,就是代码执行之前,变量对象找到var a;并且赋予a一个属性值,该值为undefined;所有输出  undefined
var a=1;
console.log(a)    //代码执行阶段,完成变量赋值,所以会输出 1.
foo(); // 3      //尽管重复的var 声明会被忽略掉,但出现在后面的函数声明还是可以覆盖前面的。
function foo() {
     console.log( 1 );
}
var foo = function() {
    console.log( 2 );
};
function foo() {
    console.log( 3 );
}

当然啦,我们只是讨论提升的知识,至于this之类的,后面我们再来讨论。 留下几道练习给可以试一试看掌握的程度怎么样

console.log(a);
var a=1;
console.log(a);
function a(){
   console.log(2)
}
console.log(a);
function foo(a){
   console.log(a);
   var a=1;
   console.log(a);
}
foo(2);

学习笔记,欢迎交流,还有很多遗漏的知识点,以后会去深入交流~

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注