ES6中的箭头函数实例详解

本文实例讲述了ES6中的箭头函数。分享给大家供大家参考，具体如下：

语法

我们先来看看箭头函数的语法：

([param] [, param]) => {
  statements
}
param => expression

param 是参数，根据参数个数不同，分这几种情况：

() => { … } // 零个参数用 () 表示；
x => { … } // 一个参数可以省略 ()；
(x, y) => { … } // 多参数不能省略 ()；

示例

我们再来看看一些示例，看看在ES5中的函数怎么通过ES6中的箭头函数来替代吧：

// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());

当然，也可以定义多个参数：

// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);
// ES6
var total = values.reduce((a, b) => a + b, 0);

当然=>后面也不一定非得接return 之后的语句，看下面：

// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});

但是需要注意的是，多行语句需要用{}括起来，单行表达式不需要{}，并且会作为函数返回值。

x => { return x * x }; // 函数返回 x * x
x => x * x; // 同上一行
x => return x * x; // SyntaxError 报错，不能省略 {}
x => { x * x }; // 合法，没有定义返回值，返回 undefined

和普通函数一样，箭头函数也可以使用剩余参数和默认参数。

var func1 = (x = 1, y = 2) => x + y;
func1(); // 得到 3
var func2 = (x, ...args) => { console.log(args) };
func2(1,2,3); // 输出 [2, 3]

特性

介绍完了箭头表达式的语法和示例，我们就需要思考一下了。如果箭头表达式仅仅就是简化了函数的命名，我们为什么要改变原来的习惯而去使用它呢？所以我们需要了解一下箭头函数的特性。

箭头函数内部没有constructor方法，也没有prototype，所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this，而非执行时。我们通过一个例子来理解:

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    setTimeout(function() {
      this.func();
    }, 100);
  }
};
o.test(); // TypeError : this.func is not a function

上面的代码会出现错误，因为this的指向从o变为了全局（函数调用中的this都是指向全局的）。如果大家对JavaScript中的this不是很熟悉的话，可以看看前面的一篇文章《javascript中this的用法实例详解》。好了，回归正题，我们需要修改上面的代码如下：

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    var _this = this;
    setTimeout(function() {
      _this.func();
    }, 100);
  }
};
o.test();

通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的 this 始终指向函数定义时的 this，而非执行时。所以我们将上面的代码修改如下：

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    setTimeout(() => { this.func() }, 100);
  }
};
o.test();

这回this就指向o了。

我们还需要注意一点的就是这个this是不会改变指向对象的，我们知道call和apply可以改变this的指向，但是在箭头函数中是无效的。

var x = 1,
  o = {
    x : 10,
    test : () => this.x
  };
o.test(); // 1
o.test.call(o); // 依然是1

希望本文所述对大家ECMAScript程序设计有所帮助。

赞 (0)

相关推荐

  • JS ES6中setTimeout函数的执行上下文示例

    本文介绍的是setTimeout函数,延迟执行函数里的执行上下文,分享给大家供大家参考学习,来看看详细的内容: (1)ES5中,setTimeout里面的函数的执行上下文为全局上下文,举例来说: function log(){ setTimeout(function(){console.log(this.id)},100) } var id=42 log.call({id:21}) //输出的结果为42 我们可以看到setTimeout,被延迟执行的函数,里面的this,指向的是全局作用域,也就

  • ES6记录异步函数的执行时间详解

    calc calc 是一个我们想要做剖析(性能分析)的异步函数.按照惯例,它的最后一个参数是一个callback.我们像这样使用 calc: calc(arg, (err, res) => console.log(err || res)) 或许,最简单的对 calc 这样的函数来剖析性能的方法是,增加一个计时逻辑到我们需要分析的地方: const t0 = Date.now() calc(arg, (err, res) => { const t1 = Date.now() console.lo

  • 详解Javascript ES6中的箭头函数(Arrow Functions)

    ES6可以使用"箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 1. 具有一个参数的简单函数 var single = a => a single('hello, world') // 'hello, world' 2. 没有参数的需要用在箭头前加上小括号 var log = () => { alert('no param') } 3. 多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加 var add = (a, b) =&g

  • ES6中Array.copyWithin()函数的用法实例详解

    ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去. Array.prototype.copyWithin(target, start = 0, end = this.length) 该函数有三个参数. target:目的起始位置. start:复制源的起始位置,可以省略,可以是负数. end:复制源的结束位置,可以省略,可以是负数,实际结束位置是end-1. 例: 把第3个元素(从0开始)到第5个元素,复制并覆盖到以第1个位置

  • 浅析Javascript ES6新增值比较函数Object.is

    浅析Javascript ES6新增值比较函数Object.is

    在Object.is出现之前我们比较值使用两等号 "==" 或 三等号"===", 三等号更加严格,只要比较两方类型不同立即返回false. 另外,有且只有一个值不和自己相等,它是NaN 现在ES6又加了一个Object.is,让比较运算的江湖更加混乱. 多数情况下Object.is等价于"===",如下 1 === 1 // true Object.is(1, 1) // true 'a' === 'a' // true Object.is('

  • ES6实现的遍历目录函数示例

    本文实例讲述了ES6实现的遍历目录函数.分享给大家供大家参考,具体如下: // npm init // npm install koa --save-dev // node --harmony app.js const fs = require('fs'); var eachDir = (() => { let queue = []; var eachFiles = (options) => { if (queue.length) { let path = queue.shift(); fs.

  • 深入浅出ES6新特性之函数默认参数和箭头函数

    深入浅出ES6新特性之函数默认参数和箭头函数

    1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值: 这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 => 符号来定义. 箭头函数相当于匿名函数,所以采用函数表达式的写法

  • ES6中的箭头函数实例详解

    本文实例讲述了ES6中的箭头函数.分享给大家供大家参考,具体如下: 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression param 是参数,根据参数个数不同,分这几种情况: () => { - } // 零个参数用 () 表示: x => { - } // 一个参数可以省略 (): (x, y) => { - } // 多参数不能省略 (): 示例 我们再来看看一些示例,看看在

  • PHP 7.4 新语法之箭头函数实例详解

    短闭包,也叫做箭头函数,是一种用 php 编写的短函数.当向函数中传递闭包时,这个功能是非常有用的,比如使用 array_map 或是 array_filter函数时. 这就是它们看起来的样子: // Post 对象的集合 $posts = [/* - */]; $ids = array_map(fn($post) => $post->id, $posts); 而以前,你必须这样写: $ids = array_map(function ($post) { return $post->id

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • C语言中调用Swift函数实例详解

    C语言中调用Swift函数实例详解 在Apple官方的<Using Swift with Cocoa and Objectgive-C>一书中详细地介绍了如何在Objective-C中使用Swift的类以及如何在Swift中使用Objective-C中的类.在后半部分也介绍了如何在Swift中使用C函数,不过对于如何在C语言中使用Swift函数却只字未提.这里我就为大家分享一下如何在C语言中调用Swift函数. 我们首先要知道的是,所有Swift函数都属于闭包.其次,Swift函数的调用约定与

  • C++ 中消息队列函数实例详解

    C++ 中消息队列函数实例详解 1.消息队列结构体的定义 typedef struct{ uid_t uid; /* owner`s user id */ gid_t gid; /* owner`s group id */ udi_t cuid; /* creator`s user id */ gid_t cgid; /* creator`s group id */ mode_t mode; /* read-write permissions 0400 MSG_R 0200 MSG_W*/ ul

  • ES6中Symbol类型用法实例详解

    本文实例讲述了ES6中的Symbol类型.分享给大家供大家参考,具体如下: Symbol是在ES6中新加入的类型. 正如我们所知,JavaScript中有以下几种类型: Undefined ,Null ,Boolean ,Number ,String, Object. 但是上述类型在处理某些情况的时候是远远不够的.下面我们来举一个例子: 假设我们要移动div,也需要在某些情况下判断该div是否处于移动状态,所以我们会想到给div这类的对象设置一个属性. if (element.isMoving)

  • Java中sort排序函数实例详解

    目录 前言 升序排序 降序排序 排序原理 总结 前言 手写一个排序算法的效率是很慢的,当然这也不利于我们在比赛或者工程中的实战,如今几乎每个语言的标准库中都有排序算法,今天让我来给大家讲解一下Java语言中的sort排序 升序排序 Collections类中的sort方法可以实现List接口的集合进行排序 public static void main(String[] args) { // 定义含有5个元素的数组 double[] scores = new double[] { 78, 45,

  • JavaScript中立即执行函数实例详解

    前言 js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此. 下面话不多说了,来一起看看详细的介绍吧. 通常我们声

  • Oracle数据库中通用的函数实例详解

    Oracle数据库中通用的函数实例详解

    目录 一. Scott用户下的表结构 1.如果自己没有Scoot表就可以自己创建一个 二.单行函数 1.字符函数 2.数值函数 三.多行函数(聚合函数) 1.统计记录数 2.最小值查询 min() 3.最大值查询 max() 4.平均值查询 avg() 5.求和函数 四.分组统计 总结 一. Scott用户下的表结构 SCOTT.是在Oracle数据库中,一个示例用户的名称.其作用是为初学者提供一些简单的应用示例,不过其默认是锁定状态,在安装时,根据用户需要,在“数据库配置助手”界面完成后,弹出

随机推荐