ES6基础:箭头函数

ES6基础:箭头函数ES6基础系列(三)箭头函数简要分析一个为什么会有箭头函数,它的意义是什么?

大家好,又见面了,我是你们的朋友全栈君。

ES6基础系列(三)箭头函数

一、基本用法

先来看看 ES5 中我们怎么写一个函数

const foo = function (num) { 
   
  return num + 1;
};

再来看看 ES6 为我们提供的箭头函数

const foo = (num) => num + 1;

看这个例子难道箭头函数是为了让我们的代码看上去更“高大上”吗?

我认为是这样的~,但这只是其中的一个很小原因,先来看看它有多“高大上”,也就是常见的用法

多参数

let foo = (value, num) => value * num;

多参数+多条语句:

let foo = (value, num) => { 
   
  const newVal = value * 2;
  return newVal * num;
};

返回一个对象

let foo = (value, num) => ({ 
    total: value * num });

参数是一个对象

let foo = ({ 
    value, num }) => ({ 
    total: value * num });

简化回调函数

const data = [
  { 
    name: "yg1", age: 1 },
  { 
    name: "yg2", age: 2 },
  { 
    name: "yg3", age: 3 },
  { 
    name: "yg4", age: 4 },
];
const res = data.map(({ 
    name, age }) => ({ 
    name, age: age + 1 }));

二、区别

抛开优雅的代码,我们仍要知道箭头函数和普通函数的区别在哪里

2.1 没有 this

箭头函数没有 this,所以需要通过查找作用域链来确定 this 的值。

箭头函数中的 this,就绑定在它最近一层非箭头函数的 this.

一句话理解:箭头函数内部的 this 是词法作用域,由上下文确定。

我们来看这样一段代码:

const obj = { 
   
  name: "111",
  foo: function () { 
   
    console.log(this.name);
    const b = function () { 
   
      console.log(this.name);
    };
    b();
  },
};

obj.foo();
  • 第一个函数字面量在作为对象的方法被调用时。this 指向对象
  • 第二个函数正常调用时指向全局对象——window

同样的代码结构,我们来看一下改造后的代码:

const obj = { 
   
  name: "111",
  foo: function () { 
   
    console.log(this.name);
    const b = () => { 
   
      console.log(this.name);
    };
    b();
  },
};

obj.foo();
  • 第一个函数字面量在作为对象的方法被调用时。this 指向对象
  • 第二个箭头函数,它的 this 绑定在最近一层非箭头函数,也就是 obj 上

2.2 没有 arguments

箭头函数没有自己的 arguments 对象,这不一定是件坏事,因为箭头函数可以访问外围函数的 arguments 对象:

function constant() { 
   
  return () => arguments[0];
}

var result = constant(1);
console.log(result()); // 1

那如果我们就是要访问箭头函数的参数呢?

你可以通过命名参数或者 rest 参数的形式访问参数:

let nums = (...nums) => nums;

2.3 不能通过 new 关键字调用

JavaScript 函数有两个内部方法:[[Call]][[Construct]]

当通过 new 调用函数时,执行 [[Construct]] 方法,创建一个实例对象,然后再执行函数体,将 this 绑定到实例上。

当直接调用的时候,执行 [[Call]] 方法,直接执行函数体。

箭头函数并没有 [[Construct]] 方法,不能被用作构造函数,如果通过 new 的方式调用,会报错。

大致了解了箭头函数以后,我们来看下面的例子:

function foo() { 
   
  return () => { 
   
    return () => { 
   
      return () => { 
   
        console.log("id:", this.id);
      };
    };
  };
}

上面代码之中,只有一个this,就是函数foo的this。

参考

写在最后

JavaScript 系列:

  1. 《JavaScript 内功进阶系列》(已完结)
  2. 《JavaScript 专项系列》(持续更新)
  3. 《ES6 基础系列》(持续更新)

关于我

  • 花名:余光(沉迷 JS,虚心学习中)
  • WX:j565017805

其他沉淀

如果您看到了最后,对文章有任何建议,都可以在评论区留言

这是文章所在 GitHub 仓库的传送门,如果真的对您有所帮助,希望可以点个 star,这是对我最大的鼓励 ~

ES6基础:箭头函数

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/148538.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 搜集对编程有帮助的论坛以及个人空间信息_猿编程怎么样

    搜集对编程有帮助的论坛以及个人空间信息_猿编程怎么样(持续更新中)论坛:编程论坛——中国最大的编程者社区:http://bbs.bc-cn.net/编程论坛-编程爱好者学习的净土,程序员交流的园地:http://www.programbbs.com/豆瓣小组:java小组http://www.douban.com/group/java/大富翁论坛:http://w

    2022年9月1日
    1
  • phpstorm2021激活码_在线激活「建议收藏」

    (phpstorm2021激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlS32PGH0SQB-eyJsaWNlbnNlSWQi…

    2022年3月26日
    333
  • sublime text激活码【注册码】

    sublime text激活码【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月19日
    58
  • phpwind升级php7,【原创文章】升级phpwind为https「建议收藏」

    phpwind升级php7,【原创文章】升级phpwind为https「建议收藏」闲来无事,看到刀客城和金刀客博客还是http协议,浏览器总是提示不安全,对于有点强迫症的我来说,看不下去,正好今天有点时间,就整了一下。phpwind好像没多少人用了,但是对于一个简单的坛子来说够用了,升级为https也挺简单,只是一开始没有找到路。首先到https://cloud.baidu.com/申请免费ssl证书,一个地址可以申请3个免费Symantec域名型DV证书。然后传到服务器…

    2022年9月20日
    0
  • python 之免费ip代理池[通俗易懂]

    python 之免费ip代理池[通俗易懂]基于proxy_pool,部署了一个开放的免费ip代理池,提供出来供大家使用。数据有效性每2分钟更新一次。地址:http://proxy.linuxdba.ltd/all/开源项目地址:https://github.com/jhao104/proxy_pool

    2022年5月29日
    57
  • java乘法代码_java九九乘法表代码[通俗易懂]

    java乘法代码_java九九乘法表代码[通俗易懂]java九九乘法表代码发布时间:2020-05-2813:34:14来源:亿速云阅读:156作者:鸽子要实现输出99乘法表,我们可以通过两层for循环来实现。具体代码为:publicclassFor99{publicstaticvoidmain(String[]args){for(intm=1;m<=9;m++){for(inti=1;i<=m;i++){inta=…

    2022年7月15日
    12

发表回复

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

关注全栈程序员社区公众号