变量提升的常见情况总结
什么叫变量提升?
把当前上下文中带有var(提升声明)/function(提升声明+定义)进行提升的声明或者定义。变量提升是将变量声明提升到它所在作用域的最开始的部分。
- 全局上下文中:基于
var/function声明的变量，也相当于给window设置了对应的属性。
实例 1
var t = 1;
function a(){
console.log(t);
var t=2;
}
a();//undefined;
这是因为函数里的变量t声明提升到函数最开始的部分了。上面的代码1相当于代码2：
//代码2
var t = 1;
function a(){
var t;
console.log(t);
t=2;
}
a();//undefined;
在函数内部，如果没有用var进行申明，则创建的变量是全局变量，而不是局部变量了。所以，建议变量声明加上var关键字。
//代码3
var t = 1;
function a(){
console.log(t)//undefined
t=4;
console.log(t);//4
var t=2;
console.log(t);//2
}
a();
function声明会比var声明优先级更高一点。
//代码4
console.log(foo);
var foo=10;
console.log(foo);
function foo(){
console.log(10);
}
console.log(foo);
相当于下面的代码：
function foo(){
console.log(10);
}
var foo；
console.log(foo);
foo=10;
console.log(foo);
console.log(foo);
运行结果如下:
//代码5
function foo(){
console.log(a);//2
}
function bar(){
var a=3;
foo();
}
var a=2;
bar();
上面的代码的运行过程是 bar()-->foo(),此时的a由于在调用 bar()之前已经初始化了，所以相当于给在 foo() 函数的所在作用域中的this 对象添加了a属性，并赋值为2，所以调用 foo() 函数的a时，实际上调用的 foo() 所在作用域的 this 的a属性。
实例 2
function Foo(){
//未定义，所以是属于this的一个属性，这里的this是window
getName = function () {
console.log(1);
}
return this;
}
Foo.getName = function() {
console.log(2);
};
Foo.prototype.getName = function(){
console.log(3);
};
//变量声明提升，将getName变量提升(只提升定义)
var getName = function(){
console.log(4);
};
//变量声明提升到作用域的顶部 (声明+定义一起提升)
function getName(){
console.log(5)
};
Foo.getName(); // 2,直接调用
getName(); // 4,变量声明提升
Foo().getName(); // 1,将getName()方法添加到window对象上
getName(); // 1
new Foo.getName(); // 2，直接调用
new Foo().getName(); // 3 相当于 var f = new Foo（） f.getName()
new new Foo().getName(); // 3
实例 3
var a = 0
function b(){
console.log(a) // fun a 函数声明提升到作用域的顶部
a = 10 //a是局部变量，赋值为10
console.log(a) // 10
return;
function a(){}
}
b()
console.log(a) // 0，此时的a还是外部作用域的a
实例 4
函数执行，函数的作用域[scope]跟它在哪执行无关，只跟它在哪定义有关。
var i = 0;
function A () {
/**
* EC(A)
* 作用域链:
*/
var i = 10;
function x () {
/**
* EC(X)
* 作用域链:
*/
console.log(i);
}
return x;
}
var y = A();
y();//10
function B () {
var i = 20;
/**
*函数的作用域跟它在哪执行无关，只跟它在哪定义有关。
*y的作用域[[scope]]是 EC(A)
*/
y();//10
}
B();
实例 5
var a = 1;
/**
* EC(G)
* a
* fn=0x000000 [[scope]]:EC(G)
*/
function fn (a) {
/**
* 私有上下文 EC(FN)
* 私有变量赋值
* a=1
* =0x000001 [[scope]]:EC(FN)
* =2
* 作用域链:
* 形参赋值：a=1
* 变量提升：
* var a;
* function a(){};不需要重新声明，但是需要重新赋值
*/
console.log(a); //[Function：a]
var a = 2; //在这里知识重新赋值
function a () { } //在变量提升阶段都处理完了
console.log(a);//2
}
fn(a);
console.log(a);//1
例题 6
获取一个变量的值，首先看是否是自己的私有变量，不是话则会根据作用域链向上级上下文查找...一直到全局上下文(window)。找到则返回，没找到则报错:x is not undefined,并且他下面的代码也不会执行了。
//首先看是否是全局变量，不是，则再看是否为window的一个属性，如果还不是，报错：ReferenceError: a is not defined(这行代码一旦报错，下面的代码都不会处理了)
console.log(a);//ReferenceError: a is not defined
a = 12;
function fn () {
console.log(a);
a = 13;
}
fn();
console.log(a);//13
实例 7
var foo = "james";
(function (foo) {
/**
* EC(ANY)
* foo:jmaes
* 作用域链:
* 形参赋值：foo="james"
* 变量提升: var foo
*/
console.log(foo);//james
var foo = foo || 'world';
console.log(foo) //jamaes
})(foo)
console.log(foo);//james
实例 8
在新版本浏览器中 function(){} + 函数如果没有出现在 {}中，则变量提升阶段是"声明+定义"(老版本浏览器不论是否出现在{}中都是"声明+定义") + 函数如果出现在{}中（除函数、对象的大括号外）则只声明。
形式1
{
//把这一行代码之前对于foo的操作都映射给去全局一份
//之后的操作都认为是私有的
function foo () { }
foo = 1
}
console.log(foo) //[Function :foo]
形式2
/**
* EC(G)
* foo
* 变量提升：function foo
*/
{
/**
* EC(BLOCK)
* foo=ex000000
* =ex000001
* 变量提升
* function foo(n){}
* function foo(m){}
*/
//把之前对foo的操作"映射"给全局
function foo () { }
foo = 1
//把之前对foo的操作"映射"给全局
function foo () { }
console.log(foo); //1
}
console.log(foo) //1
形式3
/**
* EC(G)
* foo
* 变量提升：function foo只声明不定义
*/
console.log(foo);//undefined
{
/**
* EC(BLOCK)
* foo=ex000000
* =ex000001
* 变量提升
* function foo(n){}
* function foo(m){}
*/
//把之前对foo的操作"映射"给全局
function foo () { }
foo = 1
//把之前对foo的操作"映射"给全局
function foo () { }
foo=2;//私有的操作，跟全局无关
console.log(foo); //2
}
console.log(foo) //1
实例 9
形式1
var x = 1;
function func (x, y = function any () { x = 2 }) {
//执行func(5)
/**
* AO(FUNC)
* x=5
* y=oxooooo1
* 作用域链:
* 形参赋值
* x=5;
* y=function any(){...}
* 变量提升：——
* 代码执行
* x=3;
* y();
* conosle.log(x)
*/
//执行y()
/**
* AO(Y)
* 作用域链:
* 形参赋值:——
* 变量提升:——
* 代码执行：
* x=2
*/
x = 3;
y();
console.log(x);//2
}
func(5);
console.log(x);//1
注意： 在函数执行时。 + 条件1:有形参赋值默认值(不论是否传递实参，也不论默认值的类型) + 条件2：函数体中有变量声明（ + 必须是基于let/const/var,注意let/const不允许重复声明，不能和形参变量名一致）。 + 函数体中用function声明的变量必须和形参中的某一个变量名字一致，才会有下述的机制。 这两个条件存在的情况下，除了默认形成的函数私有上下文，还会多创建一个块级私有上下文(函数体到括号包起来的)。
块级私有上下文 + 在其中声明的变量是块级上下文中私有的，和函数私有上下文没啥关系了。 + 它的上级上下文是函数私有上下文。 + 并且会把函数私有上下文"形参赋值"结束后的结果，映射给私有块级上下文中的同名字段。
形式2
var x = 1;
//条件1 形参赋值
function func (x, y = function any () { x = 2 }) {
//条件 2声明变量
var x = 3;
y();//y()是在函数私有上下文中执行的
//x是私有块级上下文中的x,不是函数私有上下文中的x
console.log(x);//3
}
func(5);
console.log(x);//1
形式3
var x = 1;
function func (x, y = function anouy () { x = 2 }) {
var x = 3;
var y = function any () { x = 4 }
y();
console.log(x)//4
}
func(5);
console.log(x);//1
实例 10
var a = 1;
function fn (a) {
/**
* EC(FN)
* 作用域链:
* 形参赋值:a=1
* 变量提升：(会进行赋值覆盖)
* var a;这一步浏览器回忽略，因为a私有变量已经存在AO(FN)中了
* a=0x001;[[scope]]:EC(FN),不会重复声明，但是会重新赋值
* 代码执行:
*/
console.log(a)// Function a
var a = 2;//赋值
console.log(a);//2
function a () { };//代码执行到这里，不会重新赋值，在变量提升阶段已经赋值了
console.log(a);//2
}
fn(a);