变量和函数声明提升

声明提升

变量和函数声明提升发生在JavaScript预编译阶段。

所谓的声明提升,就是说变量或者函数在声明的时候会被提前到当前作用域的顶部,已经处于可访问状态。

变量声明提升

var scope = 'global';
function f(){
    console.log(scope);//undefined
    var scope = 'local';
    console.log(scope);//"local"
}

由于函数体内存在变量声明提升,所以上面代码实际运行如下:

var scope = 'global';
function f(){
    var scope;    //变量声明提升到函数顶部
    console.log(scope);
    scope = 'local';    //变量初始化依然保留在原来的位置
    console.log(scope);
}
f();

这里需要注意,函数体内存在和全局作用域同名的变量scope,作用域链查找到当前函数体内发现局部变量scope,不会再去查找全局作用域当中变全局量scope了,简而言之函数体内的局部变量会覆盖全局同名变量

如果隐式声明一个变量,那么该变量是存在于全局作用域当中的。

var scope = 'global';
function f(){
    scope = 'local'; 
}
f();
console.log(scope);//"local"

上面代码,函数f内相当于对全局变量scope进行赋值

函数声明提升

创建函数有两种方式,函数声明和函数表达式,只有函数声明存在提升。

//函数声明
f('superman');
function f(name){
    console.log(name);
}

//函数表达式,报错
f('superman');
var f= function(name){
    console.log(name);
}

看下面代码:

var getName = function(){
    console.log(2);
}
function getName (){
    console.log(1);
}
getName();//2

上面代码实际运行如下:

var getName;    //变量声明提升
function getName(){    //函数声明提升到顶部
    console.log(1);
}
getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出:2

变量和函数声明提升优先级

函数声明提升的优先级是高于变量声明的,这里的优先级指的是:同名的变量和函数中,函数先提升,再遇到同名的变量或函数,提升都将被编译器忽略。

//同时声明变量a和函数a
var a;
function a() {} 
alert(typeof a); //显示的是"function",初步证明function的优先级高于var。
 
//先声明函数后声明变量,证明上边的例子不是function覆盖了变量
function a() {}
var a; 
alert(typeof a); //显示的仍是"function",而不是"undefined",即function的优先级高于var。

注意,上面只是说声明的情况,如果变量同时赋值,有不一样了

//声明了变量的同时赋值
function a() {}
var a = 1;
alert(typeof a); //number,此时不是function了。
//说明:"var a=1"相当于"var a;a=1",即先声明,后赋值,"a=1"相当于把a重新赋值了,自然就是number!

匿名函数不会向上提升

getName()
var getName = function () {
  alert('closule')
}
function getName() {
  alert('function')
}
getName()

上边的代码相当于:

function getName() { //函数向上提升
  alert('function')
}
getName()
var getName = function () {
  alert('closule')
}
getName()

不同<script>块中的函数互不影响

<script>
  getName()
  var getName = function () {
    alert('closule')
  }
<script>
<script>
  function getName() {
    alert('function')
  }
<script>

代码执行报错:TypeError: getName is not a function,因为第一个<script>块中getName()函数未定义,匿名函数又不会向上提升

总结

  • 在JavaScript中变量和函数的声明会提升到最顶部执行
  • 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找。
  • 函数的提升高于变量的提升
  • 匿名函数不会提升
  • 不同<script>块中的函数互不影响
    原文作者:Yanglinxiao
    原文地址: https://segmentfault.com/a/1190000011856598
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞