javascript中使用var定义变量的预编译效果

最新推荐文章于 2023-09-27 09:55:47 发布

原创最新推荐文章于 2023-09-27 09:55:47 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#使用var定义变量

HTML/CSS/JS 专栏收录该内容

47 篇文章

订阅专栏

本文探讨JavaScript中变量提升的概念，解释不同情况下变量声明如何被提升，包括已声明未赋值、未声明变量的情况，并通过示例代码展示其行为。

首先说明一点：javascript语法是非常灵活的，灵活的代价就是很容易导致不规范的编码和各种意想不到的运行结果。ECMAScript 5 引入了严格模式 (strict mode)，今后我们编写javascript代码最好都使用"use strict"，规范我们的javascript代码。下面的测试代码不是基于严格模式。

alert(a);
var a;//已声明未赋值
alert(b);//未声明的变量

执行结果是：a打印undefined，b报错。这说明：var a;这条语句的执行在alert(a)之前。

alert(c);
var c = 1;
alert(c);

执行结果：先打印undefined，后打印1。实际上只是把声明提前了，但是赋值语句仍然没有改变位置

alert(a);
a = 1;

执行结果：代码报错。可见没有var关键字，变量的声明不会提前，没有”预编译”的过程。

function TestClass() {
    //没有使用var关键字定义的是全局变量
    val = 1;
    alert(val);
    //全局变量会存放在window对象中
    alert(window.val);

};
//调用TestClass构造函数
test = new TestClass();
//再次验证是一个全局变量
alert(val);

没有用var，其实是定义了一个全局变量，会放在window对象中。

function TestClass() {
    val = 1;
    alert(val);//1
    alert(window.val);//undefined
    
    var val = 10;
    alert(val);//10
    alert(window.val);//undefined
}

var test = new TestClass();

alert(val);//js报错，变量为定义

由此可见：使用var定义变量，变量声明会被提前，但是赋值不会提前.