javascript学习与工作过程中的易混点记录

前言

本文档将记录自己在学习与工作过程中所走的弯路，以及一些容易混淆的方式，便于后续查询，以免重复踩坑！

javascript运行过程相关

填坑之路

箭头函数虽好，但不要滥用

javascript中的箭头函数是 ES6 引入的新特性，它提供了一种更简洁的函数声明语法。然而，尽管箭头函数在很多情况下都很方便，但是也存在那么一些场景下，是不能够使用箭头函数来替代普通函数的，像常见的比如 🈶 没有自己的this上下文，不能被用作构造函数、不能用于arguments对象等情况，最近，自己在编写自己的hexo插件的时候，就遇到过这样子的一个情况 👉 我将插件的定义直接声明为一箭头函数了！
😕 这样子做将会带来怎样的问题呢？
当我想要在函数中使用当前函数所在的上下文环境的时候，一直报的undefined异常，因此，我将其调整为普通函数，一切都恢复正常了，那么这种情况，我觉得应该也是属于不能使用箭头函数的一种情况，就是当需要函数拥有动态的上下文环境时，不能使用箭头函数，因为箭头函数的this值时在函数定义时确定的，它会补货封闭作用于中的this值，二不是在函数调用时动态确定的！！，比如 🈶 👇 的 1⃣ 个例子：

const button = document.querySelector('button');
// 写法一
button.addEventListener('click', () => {
  console.info(this)
});
// 写法二
button.addEventListener('click', function(){
  console.info(this)
})

上述的两种写法中，写法一将直接捕获到外部作用域的this值，而不是事件调用者的值，而写法二中的this则指向事件调用者本身！！