脚本宝典收集整理的这篇文章主要介绍了什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

箭头功能

（也称为“胖箭头功能”）无疑是ES6最受欢迎的功能之一。他们介绍了一种编写简洁功能的新方法。

这是一个用ES5语法编写的函数：

function timesTwo（params）{ 
  return params * 2 
}
timesTwo（4）; // 8

 

现在，这里的函数表示为箭头函数：

VAR timesTwo = params => params * 2
timesTwo（4）; // 8

 

它短得多！由于隐式返回，我们可以省略花括号和return语句（但只有在没有阻塞的情况下 - 更多内容如下）。

与常规ES5函数相比，了解箭头函数的行为方式非常重要。

变化

您将很快注意到的一件事是箭头函数中可用的各种语法。让我们来看看一些常见的：

1.没有参数

如果没有参数，您可以在之前放置一个空括号=>。

（）=> 42

事实上，你甚至不需要括号！

_ => 42

2.单个参数

使用这些函数，括号是可选的：

x => 42 || （x）=> 42

3.多个参数

这些功能需要括号：

（x，y）=> 42

4.陈述（与表达相对）

在最基本的形式中，函数表达式产生一个值，而一个函数语句执行一个动作。

使用箭头功能，重要的是要记住语句需要花括号。一旦花括号出现，你总是需要写。 return

以下是与if语句一起使用的箭头函数的示例：

var feedTheCat =（cat）=> { 
  if（cat ==='hungry'）{ return'feed 
    the cat'; 
  } else { 
    return'不要喂猫'; 
  } 
}

 

5.“块体”

如果您的函数在块中，则还必须使用显式return语句：

var addValues =（x，y）=> { 
  return x + y 
}

 

6.对象文字

如果要返回对象文字，则需要将其括在括号中。这会强制解释器评估括号内的内容，并返回对象文字。

x =>（{y：x}）

语法上是匿名的

 

重要的是要注意箭头函数是匿名的，这意味着它们没有被命名。

这种匿名性会产生一些问题：

1. 更难调试

当您收到错误时，您将无法跟踪函数的名称或其出现的确切行号。

2.没有自我参照

如果你的函数需要在任何时候都有自引用（例如递归，需要取消绑定的事件处理程序），它将无法工作。

主要好处：没有绑定'这个'

在经典函数表达式中，this关键字根据调用它的上下文绑定到不同的值。但是，对于箭头函数，它this是词法绑定的。这意味着它使用this包含箭头功能的代码。

例如，查看setTimeout下面的函数：

// ES5 
var obj = { 
  id：42，
  counter：function counter（）{ 
    setTimeout（function（）{ 
      console.LOG（this.id）; 
    } .bind（this），1000）; 
  } 
};

 

在ES5示例中，  .bind(this)需要帮助将this上下文传递给函数。否则，默认情况下this将是未定义的。

// ES6 
var obj = { 
  id：42，
  counter：function counter（）{ 
    setTimeout（（）=> { 
      console.log（this.id）; 
    }，1000）; 
  } 
};

 

ES6箭头函数不能绑定到this关键字，因此它将在词法上向上移动范围，并使用this其定义范围中的值。

不应使用箭头功能时

在学习了更多关于箭头功能的内容后，我希望您明白它们不会取代常规功能。

以下是您可能不想使用它们的一些情况：

1. 对象方法

当你打电话时cat.jumps，生命的数量不会减少。这是因为this没有绑定任何东西，并将继承this其父作用域的值。

var cat = { 
  lives：9，
  jumps：（）=> { 
    this.lives--; 
  } 
}

 

2.具有动态上下文的回调函数

如果您需要动态上下文，箭头函数不是正确的选择。看看下面的这个事件处理程序：

var button = document.getElementById（'Press'）; 
button.addEventListener（'click'，（）=> { 
  this.classList.toggle（'on'）; 
}）;

 

如果我们单击按钮，我们会得到一个TyPEError。这是因为this没有绑定到按钮，而是绑定到其父范围。

3.当它使你的代码可读性降低时

值得考虑我们之前介绍的各种语法。通过常规功能，人们知道会发生什么。使用箭头功能，可能很难直接解读您所看到的内容。

什么时候应该使用它们

箭头函数最适合需要this绑定到上下文的任何内容，而不是函数本身。

尽管他们是匿名的，我也喜欢用他们的方法，如map和reduce，因为我觉得它使我的代码更易读。对我而言，优点胜过缺点。

觉得可用，就经常来吧！ES6箭头功能就这样了，欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能全部内容，希望文章能够帮你解决什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。