前言
ECMAScript 6.0(简称ES6),作为一代JavaScript的语言标准正式发布于2015 年 6 月,至今已经发布3年多了,这里我总结了绝大部分ES6,以及ES6以后新语法的知识点,使用场景。
let/const(常用)
let,const用于声明变量,用来替代var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域)
这里外部的console.log(x)拿不到前面2个块级作用域声明的let:
在日常开发中多存在于使用if/for关键字结合let/const创建的块级作用域,值得注意的是使用let/const关键字声明变量的for循环和var声明的有些不同
for循环包括三个部分,第一部分一个变量声明,第二部分一个循环的结束的条件,第三部分每次循环要执行的表达式,也就是说第一部分在这个for循环中只会执行一次var i = 0,而后面的两个部分在每次循环的时候都会执行一遍。
而使用使用let/const关键字声明变量的for循环,除了会创建块级作用域,let/const还会将它绑定到每个循环中,确保对上个循环结束时候的值进行重新赋值。
简而言之就是每次循环都会声明一次(对比var声明的for循环只会声明一次),可以这么理解let/const中的for循环。
给每次循环创建一个块级作用域:
暂时性死区
使用let/const声明的变量,从一开始就形成了封闭作用域,在声明变量之前是无法使用这个变量的,这个特点也是为了弥补var的缺陷(var声明的变量有变量提升)
在预编译的阶段,JS编译器会先解析一遍判断是否有let/const声明的变量,如果在一个花括号中存在使用let/const声明的变量,则ES6规定这些变量在没声明前是无法使用的,随后再是进入执行阶段执行代码。
这里当满足if的条件时,进入true的逻辑,这里因为使用了let声明了变量name,在一开始就"劫持了这个作用域",使得任何在let声明之前使用name的操作都会报错。
const
使用const关键字声明一个常量,常量的意思是不会改变的变量,const和let的一些区别是:
1.const声明变量的时候必须赋值,否则会报错,同样使用const声明的变量被修改了也会报错
2.const声明变量不能改变,如果声明的是一个引用类型,则不能改变它的内存地址
let/const声明的变量却没有变为全局变量
箭头函数(常用)
ES6 允许使用箭头 ()=>() 定义函数
箭头函数对于使用function关键字创建的函数有以下区别
箭头函数没有arguments.
箭头函数没有prototype属性,不能用作构造函数(不能用new关键字调用)
箭头函数没有自己this,它的this是词法的,引用的是上下文的this,即在你写这行代码的时候就箭头函数的this就已经和外层执行上下文的this绑定了(这里个人认为并不代表完全是静态的,因为外层的上下文仍是动态的可以使用call,apply,bind修改,这里只是说明了 箭头函数的this始终等于它上层上下文中的this)
因为setTimeout会将一个匿名的回调函数推入异步队列,而回调函数是具有全局性的,即在非严格模式下this会指向window,就会存在丢失变量a的问题,而如果使用箭头函数,在书写的时候就已经确定它的this等于它的上下文(这里是makeRequest的函数执行上下文,相当于将箭头函数中的this绑定了makeRequest函数执行上下文中的this)因为是controller对象调用的makeRequest函数,所以this就指向了controller对象中的a变量
箭头函数的this指向即使使用call,apply,bind也无法改变(这里也验证了为什么ECMAScript规定不能使用箭头函数作为构造函数,因为它的this已经确定好了无法改变)
箭头函数使代码更加简洁
Es5:写法
Es6:箭头函数
在数组的迭代中使用箭头函数更加简洁,并且可以省略return关键字
注意:不要在可能改变this指向的函数中使用箭头函数,类似vue中的methods,computed中