《JavaScript 变量提升》

最新推荐文章于 2023-08-21 21:15:29 发布

HarkerYX

最新推荐文章于 2023-08-21 21:15:29 发布

阅读量174

点赞数

分类专栏： # 【 JaveScript 】

【 JaveScript 】专栏收录该内容

44 篇文章 3 订阅

订阅专栏

JavaScript 变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

以下两个实例将获得相同的结果：

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x //5

var x; // 声明 x

var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

要理解以上实例就需要理解 "hoisting(变量提升)"。

变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。

以下两个实例结果结果不相同：

<script>
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y // 5 7
</script>

<script>
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = "x 为：" + x + "，y 为：" + y;           // 显示 x 和 y // 5 undefined
var y = 7; // 初始化 y
</script>

实例 2 的 y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。实例 2 类似以下代码:

var x = 5; // 初始化 x
var y;     // 声明 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

y = 7;    // 设置 y 为 7

在头部声明你的变量

对于大多数程序员来说并不知道 JavaScript 变量提升。

如果程序员不能很好的理解变量提升，他们写的程序就容易出现一些问题。

为了避免这些问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。

	JavaScript 严格模式(strict mode)不允许使用未声明的变量。在下一个章节中我们将会学习到 "严格模式(strict mode)" 。

笔记

一、

其实主要理解 js 的解析机制就行。

遇到 script 标签的话 js 就进行预解析，将变量 var 和 function 声明提升，但不会执行 function，然后就进入上下文执行，上下文执行还是执行预解析同样操作，直到没有 var 和 function，就开始执行上下文。如:

a=5;
show();
var a;
function show(){};

预解析：

function show(){};
var a;
a=5;
show();

需要注意都是函数声明提升直接把整个函数提到执行环境的最顶端。

二、

除了以上的函数声明方式外，还可以使用匿名函数的方式。

声明：

var 变量名称=function(形参列表){
  //函数体
}

调用：

变量名称(实参列表)

注意：使用匿名函数的方式不存在函数提升，因为函数名称使用变量表示的，只存在变量提升。例：

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

function getName(){
  console.log(1);
}

getName();
//结果为2

可能会有人觉得最后输出的结果是 1。但是 getName 是一个变量，因此这个变量的声明也将提升到顶部，而变量的赋值依然保留在原来的位置。需要注意的是，函数优先，虽然函数声明和变量声明都会被提升，但是函数会首先被提升，然后才是变量。

//函数、变量声明提升后
function getName(){    //函数声明提升到顶部
  console.log(1);
}

var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
  console.log(2);
}

getName();    // 最终输出：2

三、

function jsFun6(){  //函数声明和函数表达式的区别
    
    test1();//函数声明提升，在执行代码之前会先读取函数声明，不会报错
    function test1(){//函数声明方式创建函数
        alert("测试1");
    }
    
    //test2();报错，函数还不存在
    console.log(test2)//不会报错，变量提升只是提升变量的声明，并不会把赋值也提升上来，输出undefined
    var test2=function(){
        alert("测试2");
    };//使用函数表达式创建一个匿名函数(实际是以变量test3命名的函数)
    test2();//不会报错，以创建函数
                
    var test3=function(){
        alert("测试3");
    }();//加了括号立即执行
    
    var test4 = 12;// ！注意看，一旦变量被赋值后，将会输出变量
    //函数提升优先级高于变量提升，所以函数先提升，然后变量提升覆盖之前的函数声明，表                
    //现为变量
    function test4() {
        alert("测试4");               
    }
    console.log(test4); //12

    var test5="test5_1";
    (function(){
        //js中的变量搜索顺序：找变量时，先找局部变量，如果没有局部变量；再找全局变量。
    alert(test5);//此时的test5为局部变量的提升，undefined
    var test5="test5_2";
    })();
                
}

首先 JS 在执行之前会有一个预编译过程，变量提升和函数提升就是发生在这里。

在执行 jsFun6 函数时首先会创建一个 AO 对象（Activetion Object 执行期上下文）。

AO{

}

然后会将形参和变量声明作为 AO 对象的属性名，属性的值为 undefined。

我们可以看到 jsFun6 函数里没有形参，但是有以下变量声明：

第10行的 var test2
第15行的 var test3
第19行的 var test4
第27行的 var test5

所以 AO 对象现在是这样：

AO{
    test2：undefined
    test3：undefined
    test4：undefined
    test5：undefined
}

然后会将实参的值传递给形参（当前没有形参所以略过）。

再找到函数声明作为AO的属性名，属性的值为函数声明的函数体（这里就是函数声明提升）。

我们可以看到 jsFun6 函数里有以下的函数声明：

第4行 function test1(){}
第22行 function test4(){}

这里的第 10 行和第 15 行是函数表达式不是函数声明。

所以 AO 对象现在是这样：

AO{
    test2：undefined,
    test3：undefined,
    test4：function test4(){alert("测试4");},
    test5：undefined,
    test1：function test1(){alert("测试1");}
}

这里需要注意因为之前 AO 对象里已经有 test4 属性了所以 AO 对象里原来由变量声明时得到的 test4 属性会被现在函数声明的 test4 覆盖。

到这里预编译就完成了开始执行。

执行时会先去查找 AO 对象，如果没找到就会去 GO(Global Object)对象里查找(AO 对象相当于局部变量，GO 对象相当于全局变量)。

当执行第 3 行时在 AO 里找到 test1 执行，弹出提示框显示提示信息“测试1”。

第 4 行已经提升了所以可以略过，下面其他的类似行与此相同。

执行第 8 行时, 在 AO 里找到 test2，并作为函数运行，由于 AO 里的 test2 的值是 undefined 所以执行会报错。

第 9 行输出 test2 所以输出的是 undefined。

第 10 行将函数体赋值给 test2，当前 AO 变成：

AO{
    test2：function(){alert("测试2");},
    test3：undefined,
    test4：function test4(){alert("测试4");},
    test5：undefined,
    test1：function test1(){alert("测试1");}
}

所以第 13 行执行时在 AO 里能找到 test2 并作为函数运行，弹出提示框显示提示信息“测试2”。

第 15 行由于用于赋值的函数体后面加了 () 变成立即执行函数所以函数会立即运行（这里会弹出提示框显示提示信息“测试3”）然后将返回值赋值给 test3，由于函数没有返回值所以是 undefined，也就导致了 AO 里的 test3 的属性值还是 undefined（大家可以在第18行输出一下 test3，会发现还是输出 undefined）。

第 19 行将 12 赋值给 test4，将原来 test4 的属性值覆盖了，AO 对象变为：

AO{
    test2：function(){alert("测试2");},
    test3：undefined,
    test4：12,
    test5：undefined,
    test1：function test1(){alert("测试1");}
}

所以在第 25 行会输出 12（如果在这里再把 test4 作为函数去运行就会报错）。

第 27 行将 test5_1 赋值给 test5。

第 28 行是立即执行函数，会立即执行。

在执行之前会进行预编译所以这个函数又会创建一个属于他自己的 AO 对象，为了区分我们将他标识为 AO2。

AO2{

}

然后将形参和变量声明作为 AO 对象的属性名，属性的值为 undefined。

AO2{
    test5：undefined
}

然后进行实参形参统一，以及函数声明提升（由于没有所以略过）。

执行第 30 行时在 AO2 里找到了 test5，属性值为 undefined。

所以会弹出提示框显示提示信息 “undefined”。

执行第 31 行是将 test5_2 赋值给 test5。

所以 AO2 变成了：

AO2{
    test5：test5_2
}

HarkerYX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript 变量提升》

JavaScript 变量提升JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。以下两个实例将获得相同的结果：1.x = 5; // 变量 x 设置为 5elem = document.getElementById("demo"); // 查找元素 elem.innerHTML...
复制链接

扫一扫

专栏目录