姑苏城外一茅屋，万树梅花月满天

0%

js | var,let,const,隐式声明

发表于 更新于 分类于 ， ， Valine：

很早之前我一直用 var 来声明变量，但是，最近看到的 js 大都用 let，于是想探究一番。

参考资料

在ES5中，变量声明只有var和function以及隐式声明。

ECMAScript 2015(ECMAScript 6)

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

隐式声明

没有用var,let 等关键字，使用直接赋值方式声明的是全局变量（全局对象属性）。

name = 'muzidigbig';//隐式声明（为全局变量的一个属性）
1
2
3
4
5
6
7
//    name = 'muzidigbig';//隐式声明（为全局变量的一个属性）
console.log(name);
function  person(){
    name = '木子大大';
    console.log(name);
}
person();

当我们使用访问一个没有声明的变量时，JS会报错；而当我们给一个没有声明的变量赋值时，JS不会报错，相反它会认为我们是要隐式声明一个全局变量，这一点一定要注意。

1
2
3
4
5
6
7
name = 'muzidigbig';//隐式声明（为全局变量的一个属性）
console.log(name);
function  person(){
    name = '木子大大';
    console.log(name);//木子大大
}
person();

在当前域中声明变量. 如果在方法中声明，则为局部变量（local variable）；如果是在全局域中声明，则为全局变量。

而事实上是对属性赋值操作。首先，它会尝试在当前作用域链（如在方法中声明，则当前作用域链代表全局作用域和方法局部作用域）中解析 name； 如果在任何当前作用域链中找到name，则会执行对name属性赋值； 如果没有找到name，它才会在全局对象（即当前作用域链的最顶层对象，如window对象）中创造name属性并赋值。

注意！它并不是声明了一个全局变量，而是创建了一个全局对象的属性。
即便如此，可能你还是很难明白“变量声明”跟“创建对象属性”在这里的区别。事实上，Javascript的变量声明、创建属性以及每个Javascript中的每个属性都有一定的标志说明它们的属性—-如只读（ReadOnly）不可枚举（DontEnum）不可删除（DontDelete）等等。

由于变量声明自带不可删除属性，比较

  • var name = ‘muzidigbig’
  • name = ‘muzidigbig’

前者是变量声明，带不可删除属性，因此无法被删除；后者为全局变量的一个属性，因此可以从全局变量中删除。

全局变量

在函数外声明的变量作用域是全局的：

1
2
3
4
5
6
7
var carName = "Volvo";
 
// 这里可以使用 carName 变量
 
function myFunction() {
    // 这里也可以使用 carName 变量
}

全局变量在 JavaScript 程序的任何地方都可以访问。

局部变量

在函数内声明的变量作用域是局部的（函数内）：

1
2
3
4
5
6
7
8
// 这里不能使用 carName 变量
 
function myFunction() {
    var carName = "Volvo";
    // 这里可以使用 carName 变量
}
 
// 这里不能使用 carName 变量

函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量。

JavaScript 块级作用域(Block Scope)

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

1
2
3
4
{ 
    var x = 2; 
}
// 这里可以使用 x 变量

在 ES6 之前，是没有块级作用域的概念的。

ES6 可以使用 let 关键字来实现块级作用域。

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

1
2
3
4
{ 
    let x = 2;
}
// 这里不能使用 x 变量

重新定义变量

使用 var 关键字重新声明变量可能会带来问题。

在块中重新声明变量也会重新声明块外的变量：

1
2
3
4
5
6
7
var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。

1
2
3
4
5
6
7
var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

循环作用域

使用 var 关键字：

1
2
3
4
5
var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 10

使用 let 关键字：

1
2
3
4
5
let i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 5

在第一个实例中，使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。

在第二个实例中，使用 let 关键字， 它声明的变量作用域只在循环体内，循环体外的变量不受影响。

局部变量

在函数体内使用 var 和 let 关键字声明的变量有点类似。

它们的作用域都是 局部的:

1
2
3
4
5
6
7
8
9
// 使用 var
function myFunction() {
    var carName = "Volvo";   // 局部作用域
}

// 使用 let
function myFunction() {
    let carName = "Volvo";   //  局部作用域
}

全局变量

在函数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似。

它们的作用域都是 全局的:

1
2
3
4
5
// 使用 var
var x = 2;       // 全局作用域

// 使用 let
let x = 2;       // 全局作用域

HTML 代码中使用全局变量

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。

在 HTML 中, 全局作用域是针对 window 对象。

使用 var 关键字声明的全局作用域变量属于 window 对象:

1
2
var carName = "Volvo";
// 可以使用 window.carName 访问变量

使用 let 关键字声明的全局作用域变量不属于 window 对象:

1
2
let carName = "Volvo";
// 不能使用 window.carName 访问变量

重置变量

使用 var 关键字声明的变量在任何地方都可以修改：

1
2
3
4
5
6
7
var x = 2;
 
// x 为 2
 
var x = 3;
 
// 现在 x 为 3

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量:

1
2
3
4
5
6
7
var x = 2;       // 合法
let x = 3;       // 不合法

{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量:

1
2
3
4
5
6
7
let x = 2;       // 合法
let x = 3;       // 不合法

{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量:

1
2
3
4
5
6
7
let x = 2;       // 合法
var x = 3;       // 不合法

{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

1
2
3
4
5
6
7
8
9
let x = 2;       // 合法

{
    let x = 3;   // 合法
}

{
    let x = 4;   // 合法
}

变量提升

JavaScript 中，var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明。

1
2
3
// 在这里可以使用 carName 变量
 
var carName;

let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

1
2
3
// 在这里不可以使用 carName 变量

let carName;

const 关键字

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

1
2
3
const PI = 3.141592653589793;
PI = 3.14;      // 报错
PI = PI + 10;   // 报错

const定义常量与使用let 定义的变量相似：

二者都是块级作用域,都不能和它所在作用域内的其他变量或函数拥有相同的名称。

两者还有以下两点区别：

  • const声明的常量必须初始化，而let声明的变量不用
  • const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。
1
2
3
4
5
6
7
var x = 10;
// 这里输出 x 为 10
{ 
    const x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

const 声明的常量必须初始化：

1
2
3
4
5
// 错误写法
const PI;
PI = 3.14159265359;
// 正确写法
const PI = 3.14159265359;

并非真正的常量

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。下面的代码并不会报错：

1
2
3
4
5
6
7
8
// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

但是我们不能对常量对象重新赋值：

1
2
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // 错误

以下实例修改常量数组：

1
2
3
4
5
6
7
8
// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"];
 
// 修改元素
cars[0] = "Toyota";
 
// 添加元素
cars.push("Audi");

但是我们不能对常量数组重新赋值：

1
2
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // 错误

重置变量

使用 var 关键字声明的变量在任何地方都可以修改：

1
2
3
var x = 2;    //  合法
var x = 3;    //  合法
x = 4;        //  合法

在相同的作用域或块级作用域中，不能使用 const 关键字来重置 var 和 let 关键字声明的变量:

1
2
3
4
5
6
var x = 2;         // 合法
const x = 2;       // 不合法
{
    let x = 2;     // 合法
    const x = 2;   // 不合法
}

在相同的作用域或块级作用域中，不能使用 const 关键字来重置 const 关键字声明的变量:

1
2
3
4
5
6
7
8
9
10
11
12
13
const x = 2;       // 合法
const x = 3;       // 不合法
x = 3;             // 不合法
var x = 3;         // 不合法
let x = 3;         // 不合法

{
    const x = 2;   // 合法
    const x = 3;   // 不合法
    x = 3;         // 不合法
    var x = 3;     // 不合法
    let x = 3;     // 不合法
}

const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

1
2
3
4
5
6
7
8
9
const x = 2;       // 合法

{
    const x = 3;   // 合法
}

{
    const x = 4;   // 合法
}

变量提升

JavaScript var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明（JavaScript 变量提升）。

1
2
carName = "Volvo";    // 这里可以使用 carName 变量
var carName;

const 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

1
2
carName = "Volvo";    // 在这里不可以使用 carName 变量
const carName = "Volvo";

ps

  • 使用var关键字声明的全局作用域变量属于window对象。
  • 使用let关键字声明的全局作用域变量不属于window对象。
  • 使用var关键字声明的变量在任何地方都可以修改。
  • 在相同的作用域或块级作用域中，不能使用let关键字来重置var关键字声明的变量。
  • 在相同的作用域或块级作用域中，不能使用let关键字来重置let关键字声明的变量。
  • let关键字在不同作用域，或不用块级作用域中是可以重新声明赋值的。
  • 在相同的作用域或块级作用域中，不能使用const关键字来重置var和let关键字声明的变量。
  • 在相同的作用域或块级作用域中，不能使用const关键字来重置const关键字声明的变量
  • const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:
  • var关键字定义的变量可以先使用后声明。
  • let关键字定义的变量需要先声明再使用。
  • const关键字定义的常量，声明时必须进行初始化，且初始化后不可再修改。
请我喝杯咖啡吧～