怎么使用ES6箭头函数

这篇文章主要介绍“怎么使用ES6箭头函数”，在日常操作中，相信很多人在怎么使用ES6箭头函数问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用ES6箭头函数”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于成都定制网站,高端网页制作,对成都玻璃贴膜等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业seo优化优化,H5建站,响应式网站。

ES6箭头函数似乎是一种很上瘾的函数，一旦了解你很容易用到停不下来。作为2015年ECMAScript  6更新的一部分，箭头函数有充分理由迅速流行。箭头函数语法是极好的语法糖，能解决很多需求：

• 函数关键字

• 花括号

• return关键字(对于单行函数)

此外，箭头函数还降低了JavaScript的函数范围以及this关键字的部分复杂性，因为有时真正需要的只是一个匿名函数。

但事实上，箭头函数并不一定能解决编写JavaScript函数时的每一项需求。

对象原型

先看JavaScript代码片段：

classRobot {        constructor(name,catchPhrase) {          this.name= name;          this.catchPhrase= catchPhrase;        }      };      Robot.prototype.speak= () => {        console.log(this === window);        return this.catchPhrase      };      const ironG =newRobot("Iron Giant", "Be good");      ironG.speak();

第15行的函数调用如下：

true undefined

定义了speak() 原型函数，并为新Robot对象传递了口号，那为什么这段代码的计算结果是未定义的呢?

console.log()揭示了原因。如你所见，当要求控制台判断(this ===  window)时，它返回true。这为上文对象方法示例中讨论的内容提供了依据。

当使用需要上下文的函数时，必须使用常规函数语法，以便使this正确绑定：

Robot.prototype.speak=function() {                       console.log(this === ironG); // true                       return this.catchphrase;                     };

对象方法

假设想要创建一个绑定到对象的方法。

const mario = {          lives: 3,          oneUp: () => {              this.lives++;          }      }

这个例子中，如调用mario.oneUp()，mario.lives的值应该从3增加到4。然而，按照目前所写的代码，无论调用多少次oneUp()，  lives的值都将保持不变。

为什么?正是因为this!

正如MDN所述:箭头函数自身没有this。使用了封闭词法范围的this值;箭头函数遵循正常的变量查找规则。因此，当搜索当前作用域中不存在的this时，箭头函数最终会从其封闭作用域中找到this。

例子中，封闭的范围是window对象。调用oneUp()会要求程序增加window对象中lives的值。这样的值不存在，所以代码不起作用。

相反，应该使用传统的函数语法，它将函数的this绑定到调用该函数的特定对象上：

const mario = {        lives: 3,        oneUp: function() {          this.lives++;        }      };

动态上下文

最后一个例子：

const button = document.querySelector(#darkMode);                                 button.addEventListener('click', () => {                                   this.classList.toggle('on');                                 });

到目前为止，你可能已经意识到这个代码无效及其原因。没错，这又和this有关。

箭头函数语法在函数声明时静态地绑定上下文，这与使用事件处理程序或事件监听器时试图实现的相反，它们本质上是动态的。

当通过事件处理程序或监听器操作DOM时，触发的事件指向属于目标元素的this。

对于全局执行上下文中定义的箭头函数，this将指向window。因此，上面的代码中，this.classList将被认为是window.classList，从而导致TypeError。

到此，关于“怎么使用ES6箭头函数”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！