遇事不决箭头函数？别期望“万金油”语法

本文转载自公众号“读芯术”(ID：AI_Discovery)

纳雍ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

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。

图源：unsplash

从这几个简单的例子中可以发现，JavaScript中关于this的内容值得研究，这也许会加深你对何时使用或不使用箭头函数的理解。

当前标题：遇事不决箭头函数？别期望“万金油”语法
当前路径：http://www.csdahua.cn/qtweb/news17/53917.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网