带你了解ES6解箭头函数

箭头函数

基本语法

(param1, param2, …, paramN) => { 表达式}
(param1, param2, …, paramN) => 表达式
//相当于：(param1, param2, …, paramN) =>{ return 表达式; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { 表达式}
singleParam => { 表达式}

// 没有参数的函数应该写成一对圆括号。
() => { 表达式}

更短的表达式

    var elements = [
          'Hydrogen',
          'Helium',
          'Lithium',
          'Beryllium'
        ];

    elements.map(function(element) {
          return element.length;
    }); // 返回数组：[8, 6, 7, 9]

    // 上面的普通函数可以改写成如下的箭头函数
    elements.map((element) => {
          return element.length;
    }); // [8, 6, 7, 9]

    // 当箭头函数只有一个参数时，可以省略参数的圆括号
    elements.map(element => {
         return element.length;
    }); // [8, 6, 7, 9]

    // 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
    elements.map(element => element.length); // [8, 6, 7, 9]

没有单独的this

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：

  • 如果是该函数是一个构造函数，this指针指向一个新的对象

  • 在严格模式下的函数调用下，this指向undefined

  • 如果是该函数是一个对象的方法，则它的this指针指向这个对象

         function Person() {
            // Person() 构造函数定义 `this`作为它自己的实例.
            this.age = 0;
            setInterval(function growUp() {
             // 在非严格模式, growUp()函数定义 `this`作为全局对象,
             // 与在 Person()构造函数中定义的 `this`并不相同.
                this.age++; // 这里的this.age为undefined
            }, 1000);
    }
    var p = new Person();

这时候，我们通过将this值分配给封闭的变量，可以解决this问题。

    function Person() {
        var that = this;
        that.age = 0;
    setInterval(function growUp() {
    // 回调引用的是`that`变量, 其值是预期的对象.
        that.age++;
      }, 1000);
    }

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

    function Person(){
        this.age = 0;
        setInterval(() => {
            this.age++; // |this| 正确地指向 p 实例
      }, 1000);
    }
    var p = new Person();

通过 call 或 apply 调用

由于 箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），他们的第一个参数会被忽略。（这种现象对于bind方法同样成立）

    var adder = {
        base: 1,

        add: function(a) {
            console.log(arguments)
            var f = v => v + this.base;
            return f(a);
        },

        addThruCall: function(a) {
            console.log(arguments)
            var f = v => v + this.base;
            var b = {
                base: 2
            };

            return f.call(b, a);
            // return f.apply(b, [a]);
            // return f.bind(b, a)();
        }
    };

    console.log(adder.add(1,2)); // 输出 2
    console.log(adder.addThruCall(1)); // 仍然输出 2

简单说下call、apply、bind三者的用法和区别

它们在功能上是没有区别的，都是改变this的指向，它们的区别主要是在于方法的实现形式和参数传递上的不同。call和apply方法都是在调用之后立即执行的。而bind调用之后是返回原函数，需要再调用一次才行

      var p = {
        a: 1,
        add: function(b) {
            console.log(this.a + b);
        }
      }
    var p2 = {
        a: 2
    }
    p.add(2) //3
    p.add.call(p2, 2);//4

    p.add.apply(p2, [2]);//4

    p.add.bind(p2, 2)();//4

区别：
①apply、call、bind的第一个参数都是this要指向的对象，但apply只有两个参数，第二个参数为一个数组，需要传输的参数值须全部放到数组中。而call、bind一样，参数用逗号分开。
②apply、call返回的的是一个值，而bind返回的是一个函数，需要执行这个函数才会得到值。

箭头函数不能用作构造器，和 new一起用会抛出错误。

    var Foo = () => {};
    var foo = new Foo(); // TypeError: Foo is not a constructor

箭头函数没有prototype属性。

    var Foo = () => {};
    console.log(Foo.prototype); // undefined

箭头函数不绑定Arguments 对象

    function foo(n) {
        return  arguments[0] + n
    }
    var f = () => arguments[0] + n; 

   console.log(foo(1)) ; // 2
   console.log(foo(2,1)) ; // 4

   console.log(f(1)) ; // 2//Uncaught ReferenceError: arguments is not defined

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。

    yield 关键字：
    只能在Generator函数内部使用
    运行.next()，遇到一个yield命令，就暂停
    .next()的返回值表示一个状态{value,done}
    再运行.next()，从之前遇到的那个yield [表达式]处（后）继续恢复运行
    当.next()传参的时候，yield [表达式]整个被替换为传入的参数。

函数体

箭头函数可以有一个“简写体”或常见的“块体”。
在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的return语句。

    var func = x => x * x;
    // 简写函数 省略return
    
    var func = (x, y) => { return x + y; };
    //常规编写 明确的返回值

返回对象字面量

    记住用params => {object:literal}这种简单的语法返回对象字面量是行不通的。
    var func = () => { foo: 1 };
    // Calling func() returns undefined!
    console.log(func()) //（调用返回undefined）

    var func = () => { foo: function() {} };
    // SyntaxError: function statement requires a name（函数语句需要一个函数名）
    这是因为花括号（{} ）里面的代码被解析为一系列语句（即 foo 被认为是一个标签，而非对象字面量的组成部分）。

    所以，记得用圆括号把对象字面量包起来：

    var func = () => ({foo: 1});

换行

箭头函数在参数和箭头之间不能换行

var func = ()
       => 1;
// 报错
但是，可以通过在 ‘=>’ 之后换行，或者用 ‘( )’、'{ }'来实现换行，如下：

var func = (a, b, c) =>
  1;

var func = (a, b, c) => (
  1
);

var func = (a, b, c) => {
  return 1
};

var func = (
  a,
  b,
  c
) => 1;

// 不会有语法错误

箭头函数也可以使用条件（三元）运算符

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

总结：

1.箭头函数this为父作用域的this，不是调用时的this
2.箭头函数不能作为构造函数，不能使用new
3.箭头函数没有arguments
4.箭头函数通过call和apply调用，不会改变this指向，只会传入参数
5.箭头函数没有原型属性
6.箭头函数不能作为Generator函数，不能使用yield关键字
7.箭头函数返回对象时，要加一个小括号
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,012评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,628评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,653评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,485评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,574评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,590评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,596评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,340评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,794评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,940评论 5赞 339
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,583评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2赞 352