良许Linux教程网 干货合集 ES6箭头函数不能使用的场景

ES6箭头函数不能使用的场景

ES6标准新增了一种新的函数:Arrow Function(箭头函数),下面为大家讲解一下ES6箭头函数不能使用的场景。

函数关键字

花括号 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。

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

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

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

img
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部