JS的申明提升(hosting)

目录

• 概述
• 例子
• 梳理规律
• 实例分析

内容

概述

“提升”意味着变量和函数的声明即便在执行之后, 执行引用到该内容时也依然可以“提前消费”。细节我们接下来一步步了解。

例子

var x = 1;                 // 声明 + 初始化 x
console.log(x + " " + y);  // '1 undefined'
var y = 2;                 // 声明 + 初始化 y

var num1 = 3;                   // Declare and initialize num1
num2 = 4;                       // Initialize num2
console.log(num1 + " " + num2); //'3 4'
var num2;                       // Declare num2 for hoisting

a = 'Lily';              // Initialize a
b = 'Jack';             // Initialize b
console.log(a + "" + b); // 'LilyJack'
var a, b;                // Declare both a 和 b for hoisting

梳理规律

• var的使用是会触发hoisting的, let不会

• var的使用会使得变量或方法提前在内存中占用一席之地，

  • 即便在被执行引用前没有具体赋值，它依然会拥有undefined的赋值。举例如下:

    console.log(num); // Returns undefined
    var num;
    num = 6;

  • 如果在被执行引用前有具体赋值，则会拥有赋予的值，如下:

    num = 6;
    console.log(num); // returns 6
    var num;

实例分析

var name="xiaoming from outer"; 
(function(){ 
    console.log(name)
    if(name==undefined){
        console.log(name)
        console.log("name:",name) 
        var name="xiaojun from inner"; 
    }else{
        console.log("name:",name)
    }
})()

这个实例里面有几个知识点：

• var申明会涉及hoisting和let不会；
• function(){}里面的变量值是先从内找，再找外面

基于上面两点，代码的执行过程大致就是：

• var name="xiaoming from outer" 全局划了一块蛋糕(内存)
• function执行又划了一块蛋糕(内存)
• 进入function里面，
  • 首先就尝试输出name, 于是name的值先从funciton里面找是否有赋值，答案是有！哪里呢？在后面有var name="xiaojun from inner"; 这句正好是var定义，于是触发了申明提升，它是发生在function内，所以相当于在function内先为name提供了undefined的赋值。
  • 在这里name的赋值首先是取方法内部的赋值(name=undefined)， 然后才会尝试在function开辟的蛋糕之外找(即在全局找，全局找的话就会是var name="xiaoming from outer"),
  • 所以方法内获取name的值是undefined, 于是我们条件判断时命中了 if(name==undefined)! 最终输出了"xiaojun from inner"

在这个实例中刚刚好运用了下面这两点， 请牢记并灵活运用:

• var申明会涉及hoisting和let不会；
• function(){}里面的变量值是先从内找，再找外面