ES6声明变量的6种方式,var function let const import class

在ES5中,顶层对象的属性与全局变量是等价的。

window.a = 1;
a // 1

a = 2;
window.a // 2

所以在ES6中,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。

var a = 1;
window.a // 1

let b = 1;
window.b // undefined

1. let的特点

  • let声明的变量只在它所在的代码块有效
  • 不存在变量提升,它所声明的变量一定要在声明后使用,否则报错
  • 在代码块内,使用let命令声明变量之前,该变量都是不可用的,称为“暂时性死区”(temporal dead zone,简称 TDZ)

(1) 针对第一条特性,给出对比代码如下:

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

在以上代码中,var定义的i,在全局范围内都有效,所以全局只有一个变量i;变量ilet声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。另外针对for循环,

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

函数内部的变量i(在子作用域)与循环变量i(在父作用域)不在同一个作用域,有各自单独的作用域。

(2) 针对第二、三条特性,给出代码如下:

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域。所以上面代码中,先声明了一个全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致tmp绑定了块级作用域,又因为let声明的变量不存在变量提升,所以上一条语句对tmp赋值会报错。

2. const的特点

  • const声明一个只读的常量,所以const一旦声明变量,就必须立即初始化,不能留到以后赋值。
  • 与let一样,只在声明所在的块级作用域内有效,不存在变量提升,有暂时性死区

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。 对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。

3. var的特点

  • 声明变量的作用域限制在其声明位置的上下文中,而非声明变量总是全局的
  • 由于变量声明(以及其他声明)总是在任意代码执行之前处理的,所以在代码中的任意位置声明变量总是等效于在代码开头声明

4. class的特点

  • class本质是function,实际上class就是构造函数的另一种写法,且一定要通过new调用
  • 类的所有方法都定义在prototype属性上
  • 类创建的实例里面,也有_proto_属性指向类的prototype原型对象
  • ES6的类的绝大部分功能,ES5都可以做到

注意点:

  • ES6中不存在变量提升,所以必须先定义类,才能通过类实例化对象
  • 类里面的共有属性和方法一定要加this引用
  • 类里面的this指向问题:constructor 中的this指向实例对象,方法里面的this指向这个方法的调用者

你可能感兴趣的:(#)