箭头函数能不能替代普通函数

前段时间萌芽学习ES6的时候，其中新加入的箭头函数被一部分人称作是用来替代function的，当时还不是很理解后来才发现其实这种说法是错误的！首先我们看他们的语法：

  function demo() {
        //普通函数
    }
    
    var demo = () =>{
        //箭头函数
    }

箭头函数相对于普通函数简洁很多这让人有种 => 是用来简化 function 的错觉，实际上他们两个存在着很大的差异那就是关于 this指向 问题！

首先我们来做一个简单的测试大家一看就明白了。

普通函数

<div id="div">点击获取内容</div>

<script>
    document.getElementById("div").onclick = function () {
        console.log(this)
    };
</script>

箭头函数

<div id="div">点击获取内容</div>

<script>
    document.getElementById("div").onclick = () => {
        console.log(this)
    }
</script>

————————————————————————————————————————————————-

答案已经很明显了！尽管他们看起来区别不大但是他们的指向是不同的！

在普通函数中this指向为当前的调度者，也就是说谁引用this指向谁！

但是在箭头函数中this直接指向了window！也就是说这里的this指向是全局的！这就是他们之间最大的差别，以后谁在跟萌芽说箭头函数是用来替代普通函数的萌芽第一个上去抽他，好气哦之前被坑了拿半天值拿不到结果一输出傻眼了。

不同的场景不同的用处，今天就讲到这么多啦希望看到的小伙伴可跟我一样被坑了哦www

————————————————————————————————————————————————-

想更加深入了解的可以看这篇文章，感觉总结的挺详细的也很到位，链接放在这里来个小总结。

发布了46 篇原创文章 · 获赞 43 · 访问量 2万+

私信关注