箭头函数(Arrow Functions)
说出来可能不信,我也不愿意写文章,可是,一个事实告诉我其实我真的需要做一些事情来告诉自己曾经是有过学习的,希望能帮助自己也能帮助别人。(2018年4月23日07:54:06)
我们来聊一下箭头函数吧,接下来可能是最菜版本的箭头函数
箭头函数出现的目的
1、出生
首先我们要知道箭头函数是出现在es6的,也就是es2015,容易记混,但是记住es6也是现在框架开发用的最多的规范。
2、作用
简化代码,怕是懂点都明白,可是怎么简化代码了呢?
要知道没有箭头函数的时候,函数是这样写的
var arr = [1,2,3,4]
var Store = arr.map(function(element){
return element+1;
})
复制代码
用过箭头函数后呢?
var arr = [1,2,3,4]
var Store = arr.map((e)=>(e+1))
复制代码
例子很是简单,故而没有太多的减少,好像就减少一行了,可是在大量的function中便可以节省很多行代码和时间。 除了箭头函数,每个新的函数都有自己的this,上下文函数(函数内要引入之前函数this),需要重新var that=this,在新的函数中再次调用that才可以使用,这样麻烦就繁琐,箭头函数就节省,人家直接根据上下文拿到this,简单了,而且会使代码变得简洁,不过初学者,恐怕看着有点糊涂,不过用过了,其实把它当做一个function就好了,()=>()其实是很好理解的
在es3/5,被灵活赋值到一个变量替代本对象,当然这种方法已经被淘汰了
function Store() {
var that = this;
that.time = 0;
setInterval(function timeUp() {
//that就是Store()的this对象
that.time++;
}, 1000);
}
复制代码
是时候箭头函数出马了
function Store(){
this.time=0;
setInterval(()=>(
this.time++;// |this| 就是引用Store的this对象
),1000)
}
复制代码
箭头函数是一般的函数的简写,简写就是图个方便,图方便是要付出代价,它是不能绑定它的this(本对象),arguments(参数对象),super(没有父构造方法)或者new.target(新的目标),箭头函数这么多东西被砍掉了,它非常适合无方法名的函数,它不能用作构造器。