• 欢迎访问天天编码网站,Java技术、技术书单、开发工具,欢迎加入天天编码
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏天天编码吧
  • 我们的淘宝店铺已经开张了哦,传送门:https://shop145764801.taobao.com/

6.12 深入箭头函数

JS 教程 tiantian 357次浏览 0个评论 扫描二维码

现在,让我们来深入箭头函数。

箭头函数不仅仅是创建较短函数的简洁语法。

在 JavaScript 中,我们经常需要创建一个短小的函数,然后在某个其他的地方被执行。

举例:

  • arr.forEach(func) —— func 在forEach的每一个数组元素上被执行。
  • setTimeout(func) —— func被内建的定时器执行。

这个可以认为是 JavaScript 的精髓所在,创建一个函数并将它传递到其他地方执行。

而且,在这样的应用场景中,我们经常希望不要脱离当前的上下文。

箭头函数没有“this”

正如我们在前面的对象方法,“this” 章节所述:箭头函数没有this。如果其访问this,那么该this来源于其外部。

举例,我们可以使用它来在对象方法内部进行迭代:

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

在此处的forEach中,使用了箭头函数,所以其中的this.title实际上与外部方法showList具有相同的this。那就是:group.title

如果我们使用一个普通的函数,代码将导致一个错误:

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(function(student) {
      // Error: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

错误发生的原因是因为forEach运行该函数时,默认情况下,this=undefined,所有尝试访问会导致undefined.title

这样的错误不会在箭头函数上重现,因为箭头函数没有this

箭头函数不能使用new运行

没有this的箭头函数天生另一个限制:箭头函数不能作为构造器使用。它们不能使用new进行调用。

**箭头函数 VS bind **

箭头函数=>与使用.bind(this)调用的普通函数之间存在一个细微的差别:

  • .bind(this)创建一个函数的“绑定版本”。
  • 箭头函数=>不创建任何绑定。那个函数只是没有this。其查找this的方式与普通变量的查找方式相同:从外部词法环境中查找。

箭头函数没有”arguments”

箭头函数没有arguments变量。

这对于装饰器是一件好事,当我们需要转发调用时,同样需要转发thisarguments

举例,defer(f, ms)获得一个函数,并返回包裹它的一个包装器,其会延迟ms毫秒后再执行该调用:

function defer(f, ms) {
  return function() {
    setTimeout(() => f.apply(this, arguments), ms)
  };
}

function sayHi(who) {
  alert('Hello, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("John"); // Hello, John after 2 seconds

如果没有箭头函数,相同的功能可以如下所示:

function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}

此处,我们不得不创建额外的变量argsctx,这样,位于setTimeout内部的函数才能正确获取到它们。

总结

箭头函数:

  • 没有this
  • 没有arguments
  • 不能使用new进行调用
  • 它们同样没有super,我们将在Class inheritance, super 章节学习它。

这是因为箭头函数的目的是为了阻止一些简短的代码,所以不应该具有它们自己的上下文环境,而是工作在当前的已有上下文环境中。而且它们经常用于此目的。


天天编码 , 版权所有丨本文标题:6.12 深入箭头函数
转载请保留页面地址:http://www.tiantianbianma.com/deep-arrow.html/
喜欢 (1)
支付宝[多谢打赏]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址