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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • grid布局方式的使用「建议收藏」

    grid布局方式的使用「建议收藏」开头是样式总结(下面有更详细的介绍):/*设置grid布局方式*//*设置geid布局为行内块元素还是块元素gridinline-griddisplay:grid;*//*如果行

    2022年6月30日
    20
  • 传智健康day06 移动端开发-体检预约

    传智健康day06 移动端开发-体检预约1.移动端开发1.1移动端开发方式随着移动互联网的兴起和手机的普及,目前移动端应用变得愈发重要,成为了各个商家的必争之地。例如,我们可以使用手机购物、支付、打车、玩游戏、订酒店、购票等,以前只能通过PC端完成的事情,现在通过手机都能够实现,而且更加方便,而这些都需要移动端开发进行支持,那如何进行移动端开发呢?移动端开发主要有三种方式:1、基于手机API开发(原生APP)2、基于手机浏览器开发(移动web)3、混合开发(混合APP)1.1.1基于手机API开发手机端使用手

    2022年6月24日
    36
  • cocos2d-x 3.1.1 学习笔记[3]Action 动作

    cocos2d-x 3.1.1 学习笔记[3]Action 动作

    2022年2月5日
    48
  • 移动APP漏洞自动化检测平台建设

    移动APP漏洞自动化检测平台建设前言:本文是《移动APP客户端安全笔记》系列原创文章中的第一篇,主要讲的是企业移动APP自动化漏洞检测平台建设,移动APP漏洞检测发展史与前沿技术,APP漏洞检测工具与平台,以及笔者的一些思考。希望能对移动App自动化漏洞检测感兴趣的同学有所帮助,限于笔者技术水平与文章篇幅,有些内容暂没有逐一详细分析,后续我争取多学习多分享,在此也欢迎大家指点和交流。一、国内AndroidApp漏洞检测

    2022年5月27日
    28
  • 基于大数据平台的互联网数据采集平台架构介绍

    基于大数据平台的互联网数据采集平台架构介绍互联网的飞速发展将社会带入数据高度发达且公开的信息时代,数据对于企业经营、政府决策及社会动态分析等具有极其重要的作用,而如何大规模、快速采集数据成为技术焦点。网络爬虫是按照一定规则自动游走爬取互联网文本网页的程序或者脚本。文本数据大多嵌套于网页程序代码中。数据采集的效率直接决定数据的有效及时性,数据的快速采集成为重中之重。基于大数据平台的的互联网数据采集,可以有效适用于海量数据采集场景,为…

    2022年6月3日
    35
  • 真正毁掉您的不仅仅是闲着,更多是忙的马不停蹄「建议收藏」

    真正毁掉您的不仅仅是闲着,更多是忙的马不停蹄

    2022年2月14日
    41

发表回复

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

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