timg.jpg
看到这里，我相信你已经知道了作用域的概念了，以及根据声明的位置和方式将变量分配给作用域的相关原理了。函数作用域和块作用域的行为是一样的，可以总结为：任何声明在某个作用域内的变量，都将附属于这个作用域。
首先我们上个例子
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);
欢迎访问我的个人网站zhengyepan
学习笔记，时间匆忙，欢迎交流，还有很多遗漏的知识点，以后会去深入交流~
网友评论