ES6之箭头函数

简介: ES6之箭头函数



前言

简单的讲,箭头函数是将原function关键字和函数名删掉的一种简写函数形式。


一、定义

通常函数的定义是:

fuction 函数名(参数){
    //函数体
  }
  //例如
  function fn1(a,b){
    return a+b;
  }
  var fn2=function(a,b){
    return a+b;
  }

箭头函数定义如下:

(a,b)=>{
    return a+b
  }
  //或
  var fn1()=(a,b)=>{
    return a+b
  }

二、简化

1.当函数参数只有一个时

这时括号可以省略,但是没有参数时,括号不能省略。

var fn1=()=>{};//无参数
  var fn2=a=>{};//单个参数
  var fn3=(a,b)=>{};//多个参数
  varr fn4=(a,b,...args)=>{};//多变参数

2.当函数体只有一条return语句时

这时可以省略{}和return关键字,但函数体包含多条语句时候,不能省略{}和return关键字。

()=>'hello';//返回'hello'字符串
  (a,b)=>a+b;//返回a+b的和
  (a)=>{
    a=a+11
    return a//多条语句
  }

三、注意

1.箭头函数的this

箭头函数中的this是静态的,始终指向函数声明时所在作用域下的this值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getAge1() {
            console.log(this.age);
        }
        let getAge2 = () => {
            console.log(this.age);
        }
        window.age = 20;//设置window属性age
        const school = {
            age: 18
        }
        //直接调用
        console.log("直接调用");
        getAge1();
        getAge2();
        //使用call改变this指向调用
        console.log("使用call改变this指向调用");
        getAge1.call(school);
        getAge2.call(school);
    </script>
</body>
</html>

上述两个函数直接调用时,this均指向的是window作用域下的age,但使用call改变this指向school作用域下的age,发现箭头函数并未改变指向,正如上诉所说它的this是静态的,始终指向函数声明时所在作用域下的this值。

2.不能作为构造函数实例化对象

let People = (name, age) => {
            this.name = name;
            this.age = age;
        }
        let p = new People('王五', 20);

会报错

3.不能使用argument变量

let fn = () => {
            console.log(arguments);
        }
        fn(1, 2, 3);

报错

总结

以上就是箭头函数的介绍,但是大家一定要注意箭头函数的实际运用,比如箭头函数与解构赋值结合,箭头函数与数组方法回调结合等。(与数组方法回调结合我会在后面ES6的常见数组新增方法中讲解)

相关文章
|
监控 Linux Shell
Linux 进程问题调查探秘:分析和排查频繁创建进程问题
Linux 进程问题调查探秘:分析和排查频繁创建进程问题
237 0
|
测试技术 Python
探索Python中的装饰器:从基础概念到高级应用
本文深入探讨了Python中一个强大而灵活的特性——装饰器。从其基本定义出发,逐步解析装饰器的本质、运作机制以及如何高效利用这一工具来优化代码结构、增加功能和提升代码的可读性与可维护性。通过具体示例,包括自定义简单装饰器、带参数装饰器、多重装饰等高级话题,本文展示了装饰器在软件开发中的广泛应用,旨在为读者提供一个全面而实用的装饰器使用指南。
|
编解码 缓存 安全
Android SELinux 参数语法介绍及基础分析
Android SELinux 参数语法介绍及基础分析
558 0
|
存储 数据采集 数据挖掘
ETL是个什么样的过程
【5月更文挑战第11天】ETL是个什么样的过程
262 2
|
算法 Linux
【Linux】日历和时间命令
【Linux】日历和时间命令
157 0
|
机器学习/深度学习
CNN 卷积神经网络(中)
CNN 卷积神经网络(中)
207 0
CNN 卷积神经网络(中)
|
Java 程序员
开发趋势 Java Lambda 表达式 第三篇
Java Lambda 表达式可以与List,Map,set集合和常规操作进行整合,以提供一种更简洁、更可读的代码编写方式。以下是几个示例:
128 0
|
存储 编译器 C语言
C语言第十三课--------初阶指针的认识--------重要部分
C语言第十三课--------初阶指针的认识--------重要部分
|
机器学习/深度学习 传感器 算法
3D城市无人机中继安置附matlab代码
3D城市无人机中继安置附matlab代码
|
iOS开发
IOS滚动不流畅问题
IOS滚动不流畅问题
175 0