美文网首页
JS中“无我”的=>箭头函数?

JS中“无我”的=>箭头函数?

作者: 羞羞的王大锤 | 来源:发表于2020-03-11 23:49 被阅读0次

在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,这样就实现了固定化

感受🤛

果然无招胜有招,“无我”才是最高境界,箭头兄,


最后 🙌

好啦,以上就是我本次分享的全部内容啦,如果你觉得我的文章对你有一丢丢帮助,那么请不要吝啬你的赞👍哦,阿门~

相关文章

网友评论

      本文标题:JS中“无我”的=>箭头函数?

      本文链接:https://www.haomeiwen.com/subject/hewkjhtx.html