变量提升,函数提升概念及相关题
之前总是对变量提升,函数提升一知半解,随着时间的推移,理解的越来越深刻,接下来就写一写,有不对的地方请大家指出来。
1) 变量提升
1. 通过var定义(声明)的变量, 在定义语句之前就可以访问到
2. 值: undefined
console.log(a)//undefined var a = 1111; console.log(a)//1111
等同于
var a = undefined console.log(a) //undefined a = 1111; console.log(a) //1111
即:变量提升。你在一个作用域任何一个地方声明变量,都会被提升到作用域开始
2) 函数提升
1. 通过function声明的函数, 在之前就可以直接调用
2. 值: 函数定义(对象)
foo(); function foo(){ console.log(1111); }
输出结果 1111
如下:
function foo(){ console.log(1111); } foo();
注意点:
foo(); var foo = function(){ console.log("aaa");
}
报错运行结果是: foo is not a function
原因是:js解析遇到 foo()时会默认当做函数来解析
综合题
(1)var和函数
注意点:如果函数声明和变量声明使用同一变量名称,函数声明的优先级高于变量
<script> console.log(a)//function a(){} var a = 1; console.log(a)//1 function a(){
} console.log(a)//1 </script>
等同于以下代码:
其过程:变量a先声明,给a赋值为undefined,后来预编译函数function a(){}再声明;输出a为function a(){} ; 之后给a赋值为1;输出a为1
<script> var a; a = function a(){} console.log(a)//function a(){} a=1; console.log(a)//1 console.log(a)//1 </script>
(2)var和函数参数
<script> var a=8; function fn(a,b){ console.log(a)//undefined var a=10; console.log(a)//10 } fn(); </script>
解析:用fn的时候传入参数a,b。 当前函数作用域能够找到a,其值是undefined。 所以不会向外查找
<script> function fn(a,b){ console.log(a)//hello var a=10; console.log(a)//10 } fn('hello'); </script>
解析:调用fn,传入参数a,b。 a和b会预编译赋值undefined,调用fn,传入"hello", a就被赋值为hello。之后给a赋值为10,输出a为10。
函数,函数参数,var
<script> var a=10; function fn(a,b){ console.log(a)//function a(){} 这里输出function a(){}, 不是参数a的值 var a=10; console.log(a)//10 function a(){} console.log(a)//10 } fn(15); </script>
fn里面有参数a,也有变量a,也有函数a,这种迷惑性更高。其实当你知道三者先后顺序之后就不迷惑了
经过测试,我发现:参数a会覆盖预编译变量a的默认值,如果有函数,函数会覆盖参数a的值,就是先后顺序而已。
函数形参声明--->函数声明---->变量声明
<script> a();//1
console.log(a) // function a(){ console.log(1)}
var a = c = function() { console.log(2) }; a();//2 function a() { console.log(1) } a();//2 (function(b) { b();//2 c();//2 var b = c = function a() { console.log(3) } b()//3 })(a); c();/ </script>
注意点:
如 var a = b = 1 ;相当于 b = 1,是全局变量,之后 var a = b; 把 b 的值1 赋值给a,此时a是局部变量
接着来看,
console.log(typeof foo); console.log(typeof bar); console.log(typeof add); //函数的声明 function foo(){ alert('foo'); } //命名函数表达式 var bar = function(){ alert('bar'); }; // 函数表达式-匿名函数 var add = function(a,b){ return a+b; }
输出结果为 function undefined undefined
console.log(b); console.log(b()); var b=1; function b(){ return 2; }
输出结果为
function b(){ 2
return 2;
}
console.log(a) console.log(b)
b()
function a() { console.log(a) } var b = function(){ console.log(b) }
输出结果
function a() { undefinded b is not a function
console.log(a)
}