JavaScript中的常规函数与箭头函数？

常规函数与箭头函数

一个箭头函数来简洁编写代码。常规函数和箭头函数的工作方式相似，但是它们之间存在一些差异。让我们简要地讨论一下这些差异。

箭头函数的语法

let x = (params) => {
//代码
};

正则函数的语法

let x = function functionname(params){
//代码
};

“ this”关键字的用法

它不能在箭头功能中使用“ this”关键字，而在常规功能中可以不受干扰地使用它。

示例

在以下示例中，在对象“ num ”内部使用了常规（矩形）和箭头（正方形）函数，该对象由len(length)和bre(breadth)属性组成。我们的目标是使用箭头函数找到正方形的面积（len * len），并使用常规函数找到矩形的面积（len * bre）。但是由于“ this ”关键字在 箭头函数中不起作用，因此将正方形 区域的值返回为“ NaN ”，而使用常规函数，我们得到了矩形的确切区域如输出所示。

<html>
<body>
<script>
   var num = {
      len: 12,
      bre: 13,
      square:() => {
         document.write(this.len * this.len);
      },
      rectangle(){
         document.write(this.len * this.bre);
      }
   };
   num.square();
   document.write("</br>");
   num.rectangle();
</script>
</body>
</html>

输出结果

NaN
156

“ new”关键字的用法

该箭头的功能是不是“ constructible ”，而是“可赎回”这样的关键词“新”，而不能在这里工作常规功能都是“可赎回”和“ constructible ”因此，“新”的关键字在这里工作。

示例

在以下示例中，使用“ new ”关键字将一些参数传递给常规函数和箭头函数。但是由于箭头函数不可构造，我们会得到一个错误，而常规函数会得到一个合法的输出。

<html>
<body>
<script>
   var word = function(){
      document.write(JSON.stringify(arguments)); 
       ///  executes '{"0":"Tutorix","1":"Nhooo"}' as output
   };
   new word("Tutorix","Nhooo");  
   var newword = ()=> {
      document.write(JSON.stringify(arguments)); 
      //执行“ newword不是构造函数”作为输出
   };
   new newword("Tutorix","Nhooo");
</script>
</body>
</html>

JavaScript中的常规函数​​与箭头函数？