关闭

初步探究ES6之箭头函数

标签: 函数javascriptes6箭头函数
19737人阅读 评论(4) 收藏 举报
分类:

今天要介绍的是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
6
1
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

ES6折腾记- 箭头函数【Arrow function】要点及脱坑点

ES6的箭头函数的特点:永远是匿名函数,This指向于obj内部;
  • bomess
  • bomess
  • 2016-09-06 00:28
  • 5636

ES6中的箭头函数的定义和调用方式

基本用法:ES6中允许使用“箭头”(=>)定义函数var f = v => v; 上面代码相当于:var f = function( v ) { return v; }根据箭头函数有参数和无参...
  • itpinpai
  • itpinpai
  • 2016-08-11 14:43
  • 14542

初步探究ES6之箭头函数

http://blog.csdn.net/mevicky/article/details/49942559 http://blog.csdn.net/mevicky/article/detail...
  • u011904605
  • u011904605
  • 2016-12-01 21:43
  • 216

初步探究ES6之箭头函数

天要介绍的是ES6中的箭头函数。 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expre...
  • weixin_36065510
  • weixin_36065510
  • 2017-02-23 10:01
  • 105

ES6箭头函数和它的作用域

在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值得关注的一个! 它不仅仅是很棒很酷, 它很好的利用了作用域, 快捷方便的在现在使用以前我们用的技术, 减少了很多代码……但是如果你不...
  • hacke2
  • hacke2
  • 2014-11-10 10:19
  • 6098

浅谈ES6中的箭头函数

ES6中提出了一个新的概念,叫做箭头函数。我们可以把这个概念,理解成一个“简化版”的函数。之所以说箭头函数是所谓的“简化版”,主要原因有二,其一是箭头函数的写法比较简单,其二是箭头函数缺少Functi...
  • qs8lk88
  • qs8lk88
  • 4天前 16:45
  • 11

尝试 ES6 中的箭头函数

原文地址 https://imququ.com/post/arrow-function-in-es6.html 尝试 ES6 中的箭头函数 文章目录 定义特...
  • SengMay
  • SengMay
  • 2016-04-26 19:55
  • 311

ES6 箭头函数中的 this?(临时性保存)

是否局部(Lexical)?包括我在内的许多人,都会这么描述箭头函数里 this 的行为:局部的 this。什么意思呢? 点我 document.getElementById('demo'...
  • devincob
  • devincob
  • 2017-05-22 18:18
  • 179

React native 之ES6语法(promise,箭头函数)

这里总结几个ES6与ES5区别中常用的几块。一、箭头函数ES6中提供了使用(=>)符号来定义函数。 箭头函数是用箭头符号在需要回调函数的地方之间定义不需要名称,代码简洁。 将需要的参数放在=>前的...
  • sushineboy
  • sushineboy
  • 2017-11-19 13:35
  • 137

ES6,箭头函数解决this作用域问题

ES6 添加了一个特殊的语法形式用于函数声明,叫作箭头函数。它看起来是下面这样的: var foo = a => {   console.log( a ); }; foo( 2 ); // 2 这里...
  • weixin_37643633
  • weixin_37643633
  • 2017-11-17 11:27
  • 65
    个人资料
    • 访问:298918次
    • 积分:4545
    • 等级:
    • 排名:第7539名
    • 原创:146篇
    • 转载:0篇
    • 译文:0篇
    • 评论:86条
    博客专栏