变量提升必须注意的问题

声明变量

在使用一个变量的时候,我们必须先声明一个变量,我们共有 varletconst 这三个关键字可选择,具体使用哪个关键字,那就要根据业务场景来使用。声明一个变量可以赋值为任何数据类型的,因为JS的松散性,然后要注意的是声明变量的时候可以简写。

let a = 10, b = 20;

变量提升

我们在使用变量或函数的时候,理解什么时候被初始化值的是至关重要。变量提升是指在声明一个变量之前就使用了变量,在全局作用域中,只有使用var关键字声明的变量才会变量提升,变量提升的时候浏览器只知道有这么一个变量,但你下面定义的值还没有赋值给这个变量,这时候变量的值是undefined的,等到浏览器执行到下面的代码的时候才是一个赋值的过程。所以变量提升的时候没有初始化值。用var声明变量的时候回给window增加一个相同变量名的属性,所以你也可以通过属性名的方式获取这个变量的值,当没有使用任何关键字声明时,只是给一个变量赋值时,变量也相当于给window增加一个相同变量名的属性。

console.log(a); // -> undefined
var a = 10;
console.log(a); // -> 10
console.log(window.a); // -> 10

b = 10;
console.log(window.b); // -> 10

函数提升

定义一个函数可以使用函数声明和函数表达式,这两种方式在提升的时候也是有区别的,函数声明会提升到作用域的顶部,在提升的时候会分配一个内存空间,变量指向这个函数的内存空间,所以在定义一个函数之前是可以执行这个函数的,函数声明的方式定义函数会提升。而函数表达式就跟变量提升,仅仅只是声明,并没有给其赋值。

fn1() // -> "函数声明"
function fn1() {
    console.log("函数声明")
}

fn2() // -> "fn2 is not a function"
var fn2 = function () {
    console.log("函数表达式")
}

重复声明

var可以重复声明同一个变量,如果重复声明了,就相当于给变量赋值一样,用letconst在同一个作用域中是不可以重复声明同一个变量的,如果重复声明了会报错。关于函数表达式,如果重复的定义相同函数名的函数,后面的会覆盖前面的函数,因为JavaScript没有重载。

var a = 10;
var a = 100;
console.log(a); // -> 100

function fn() {
    return "第一个fn函数"
}
function fn() {
    return "第二个fn函数"
}
console.log(fn()) // -> "第二个fn函数"

特殊情况

1、在块级作用域中(如iffor),var声明变量function定义函数的时候,他们都是只声明但还未初始化值。2、return语句下面的语句也是会提升的,变量是只提前声明,函数是声明跟初始化值一起完成。3、return本身这条语句不会提升。4、自执行函数不会提升。5、回调函数不会提升。

综合练习

var a = 1;
function b() {
  a = 10;
  return;
  function a() {}
}
b();
console.log(a);

答案:1

function foo(){
    function bar() {
        return 3;
    }
    return bar();
    function bar() {
        return 8;
    }
}
alert(foo());

答案:8

function parent() {
    var hoisted = "I'm a variable";
    function hoisted() {
        return "I'm a function";
    }
    return hoisted(); 
}
console.log(parent());

答案:“TypeError: hoisted is not a function”

alert(foo());
function foo() {
  var bar = function() {
    return 3;
  };
  return bar();
  var bar = function() {
    return 8;
  };
}

答案:3

var myVar = 'foo';
(function() {
  console.log('Original value was: ' + myVar);
  var myVar = 'bar';
  console.log('New value is: ' + myVar);
})();

答案:“Original value was: undefined”, “New value is: bar”

最近在总结一系列的前端知识,原文在GitHub中,内容会持续更新….

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页