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

前言

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

基本知识查漏补缺

symbol

Symbol官网

symbol是一种基本数据类型，Symbol()函数会返回symbol类型的值，symbol类型具有静态属性与静态方法，

symbol.for(key:string)–类似map的工作机制

Symbol.for(key)方法会根据给定的key，从运行时的symbol注册表中找到对应的symbol，如果找到了，就返回它，否则，就新建一个与该键关联的symbol，并放入全局symbol注册表中！

javascript运行过程相关

返回结果是一个顺序执行的动作队列

💯 在阅读关于render()源码的时候，发现一处平实自己比较少用的用法：用一个()将两个表达式给包装起来，中间使用逗号来分割，将整个结果作为函数的输出，这里我愿称之为“返回的可执行操作”，因为这个函数在return的时候，将两个动作都顺序执行，而且以最后一个表达式语句的执行结果输出作为整体的输出， 👇 是对应的一个demo例子：

function xx(){
  return 999
}
function render() {
  return (
    console.info(123),
    xx()
  )
}
console.info(render())  // 先输出123，再输出999

js的onclick不可变

我们在给元素设置监听的时候，一般是通过node.addEventListener('click', () => {})，假如我们这个时候需要改变这个click事件，发现怎么都是改变不了的，因为这个click事件就有点类似于已经被设置到元素的事件监听器列表中了，这个监听器列表我们是不能够直接访问到的，因此，并不存在能够从代码层面改变到设置到内存中的事件监听器对象！！！

填坑之路

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

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则指向事件调用者本身！！

在form中使用button的坑

在Vue中使用button标签的时候，一般我们是在其点击事件click中设置的监听，但是发现当在form表单下的这个按钮，点击的时候会响应点击事件，然后还出现页面重新加载的现象。
👉 这通常是因为button的type属性默认值是submit，因此才会出现当在form表单中点击该按钮时会提交表单，从而导致页面的重新加载
要解决这个问题，可以将按钮的type属性设置为button