在ES6中,允许使用“箭头”(=>)定义函数
首先我们来看看它是怎么定义函数的
定义函数
var sum = (num1,num2) => num1 + num2;
//相当于
var sum = function(num1,num2){
return num1 + num2;
} ;
哦哦,原来箭头函数是定义函数的一种简化方法,它省去了function、return这样的单调乏味且罗里吧嗦的关键字,使代码一下子变得很清爽
- 注意
如果箭头函数代码块里面不至一条语句时,需要用大括号把它们包起来,并使用return返回
那箭头函数的作用就这点吗?远远不是
箭头函数解决了this绑定问题
这才是箭头函数的灵魂所在,我们先来看个例子
var man = {
name:'chuichui',
sing:function(){
setTimeout(function(){console.log(this.name,'is singing');},100)
}
}
var name= 'wangcai';
man.sing(); // "wangcai is singing"
在setTimeout中延迟执行,怎么就变成了旺财在唱歌呢?
这里面其实都是this搞得鬼
原来setTimeout中所执行函数中的this,指向全局对象 而全局对象中name变量的值为"wangcai"
如果变成箭头函数,情况就有点不一样了
var man = {
name:'chuichui',
sing:function(){
setTimeout(() =>{console.log(this.name,'is singing');},100)
}
}
var name= 'wangcai';
man.sing(); // "chuichui is singing"
这是因为普通函数this指向运行时所在的作用域,第一个例子中作用域是(全局对象);箭头函数中的this绑定了定义时所在的作用域,第二个例子中作用域是sing函数,这样使箭头函数可以让this指向固定化**
实质
this指向固定化其实并不是箭头函数内部有绑定this机制,实际上箭头函数根本没有自己的this,这样导致内部的this就是外部代码的this,这样就实现了固定化
感受🤛
果然无招胜有招,“无我”才是最高境界,箭头兄,
最后 🙌
好啦,以上就是我本次分享的全部内容啦,如果你觉得我的文章对你有一丢丢帮助,那么请不要吝啬你的赞👍哦,阿门~
网友评论