ES6基础基础
一、新的变量声明方式 let/const
与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提
升。
通过2个简单的例子来说明这两点。
而这个简单的例子,会被编译为:
变量提升demo示例
当然,你的代码编译成为了ES5之后,仍然会存在变量提升,因此这一点只需要我们记住即可。在实际使用中,也需要尽量避
免使用变量提升的特性带来的负面影响。只有在面试题中,才会对变量提升不停的滥用。
使用ES6,我们需要全面使用let/const替换var,那么什么时候用let,什么时候用const就成为了一个大家要熟练区分的一个知
识点。
我们常常使用let来声明一个值会被改变的变量,而使用const来声明一个值不会被改变的变量,也可以称之为常量。
当值为基础数据类型时,那么这里的值,就是指值本身。
而当值对应的为引用数据类型时,那么我这里说的值,则表示指向该对象的引用。这里需要注意,正因为该值为一个引用,只
需要保证引用不变就可以,我们仍然可以改变该引用所指向的对象。
当我们试图改变const声明的变量时,则会报错。
写几个例子,大家可以仔细揣摩一下:
只要抓住上面我说的特性,那么在使用let/const时就会显得游刃有余。
根据我自己的经验,使用const的场景要比使用let的场景多很多。
二、 箭头函数的使用
之前我说ES6颠覆了js的编码习惯,箭头函数的使用占了很大一部分。
首先是写法上的不同:
箭头函数可以替换函数表达式,但是不能替换函数声明
其次还有一个至关重要的一点,那就是箭头函数中,没有this。如果你在箭头函数中使用了this,那么该this一定就是外层的
this。
也正是因为箭头函数中没有this,因此我们也就无从谈起用call/apply/bind来改变this指向。记住这个特性,能让你在react组件
之间传值时少走无数弯路。
在ES6中,会默认采用严格模式,因此this也不会自动指向window对象了,而箭头函数本身并没有this,因此this就只能是
undefined,这一点,在使用的时候,一定要慎重慎重再慎重,不然踩了坑你都不知道自己错在哪!这种情况,如果你还想用
this,就不要用使用箭头函数的写法。
先记住箭头函数的写法,并留意箭头函数中关于this的特殊性,更过实践与注意事项我们在封装react组件时再慢慢来感受。