解析 ES6 新增语法:奇妙的箭头函数

  • 什么是箭头函数?看下面的语法。
  • 为什么要用箭头函数?一个字:短。
    • 1 箭头函数最大的优点就是简短。
    • 2 箭头函数不能用作构造函数。适用于那些本来需要匿名函数的地方。
    • 3 引入箭头函数有两个方面的作用:更简短的函数并且不绑定this。

1. 箭头函数语法

  1. 标准形式:块体

(参数1, 参数2, …, 参数N) => { 函数体 }

    var arrowFunc1 = (x, y, z) => {
      if (x > 0){
        return y + z;
      }else{
        return y -z;
      }
    }
    a = arrowFunc1(1, 2, 3);//5
    b = arrowFunc1(-1, 2, 3);//-1
  1. 如果函数体只有一个表达式,可以写成:简写体,省略 return

(参数1, 参数2, …, 参数N) => 表达式

    // 你看看,多么简洁
    var arrowFunc = (x, y) => x + y;
    a = arrowFunc(1, 2);//3
  1. 如果只有一个参数,可以写成:

单一参数 => {函数体}

单一参数 => 表达式

    var arrowFunc = x => x * 2;
    a = arrowFunc(2);//4
  1. 如果没有参数,应该写成一对圆括号。

() => {函数体}

() => 表达式

    var arrowFunc = () => console.log('hello world');
    arrowFunc(); //hello world
  1. 支持剩余参数和默认参数

(参数1, 参数2, …rest) => {函数体}

(参数1 = 默认值1,参数2 = 默认值2, …, 参数N = 默认值N) => {函数体}

  1. 支持参数列表解构
  • ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
    var arrowFunc = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
    a = arrowFunc(); // 6

2. 深入理解箭头函数

  1. 更短的函数
    var materials = [
      'Hydrogen',
      'Helium',
      'Lithium',
      'Beryllium'
    ];

    // 使用普通函数: 求每个元素的长度
    a = materials.map(function(elem){
      return elem.length;
    }); //[8, 6, 7, 9] 
    
    // 使用箭头函数: 求每个元素的长度
    a = materials.map(elem => elem.length); //[8, 6, 7, 9] 
    // 你看看,你看看,多么简洁。简洁明了,
    // 节省打字时间,节省阅读时间,节省理解时间。
  1. 不绑定this
  • 在箭头函数出现之前,每个新定义的函数都有它自己的 this 值。
  • This 被证明是令人厌烦的面向对象风格的编程。(我倒是很喜欢 this,看见引用类属性而不加 this 的代码,我就想给加上。)
  • this 确实会带来一些问题,比如下面的内部函数中的 this 和外面的 this 分别指向不同的对象。但是我们希望它们指向同一个对象。
    function Person() {
      // Person() 构造函数定义 `this`作为它自己的实例.
      // 也就是说,这个 this 指向 Person() 的实例。
      this.age = 10;
      console.log("this.age=", this.age); //输出 10
      setInterval(function growUp() {
        // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
        // 与在 Person()构造函数中定义的 `this`并不相同.
        // 也就是说,这个 this 指向全局对象而不是 Person() 的实例,所以计算结果是 NaN
        this.age++;
        console.log("this.age=", this.age);
      }, 1000);
    }
    a = new Person();
  • 在ECMAScript 3/5中,通过将this值分配给封闭的变量(局部变量),可以解决this问题。
  • 还记得 2008 年第一次遇到 this 引起的 bug 时,查了半天,函数闭包中的 this 居然和外面的不一样。看了高手的代码,才发现使用下面这一招就解决了。
  • 大家习惯用: var self = this;
function Person() {
  var that = this;//在 ActionScript 中,我经常这么干 
  that.age = 0;//让局部变量 that 指向 this

  setInterval(function growUp() {
    //  回调引用的是`that`变量, 其值是预期的对象. 
    // 也就是说,内部函数可以访问父级函数的局部变量,这样就保证了同一个 that 指向同一个 this 
    that.age++;
  }, 1000);
}
  • 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此,在下面的代码中,传递给setInterval的函数内的this与封闭函数中的this值相同:
  • 箭头函数很好地解决了 this 问题,this 就是 this,只有一个 this,不必再为不同的 this 头疼了。
  • 不绑定 this,也就是说作用域不把 this 据为己有,而是继承作用域链上一层的 this,大家共用一个 this 。
    function Person(){
      this.age = 0;//这个 this 指向 Person 实例
      console.log("Person() this.age=", this.age); 
      // 下面的 this 继承父级函数的 this 也指向 Person 实例
      setInterval(() => {
        this.age++;
        console.log("箭头函数 this.age=", this.age);
      }, 1000);
    }
    
    a = new Person();
    console.log("全局对象 this.age=", this.age);//这个 this 指向全局对象 
    /** 输出如下
Person() this.age= 0
全局对象 this.age= undefined
箭头函数 this.age= 1
箭头函数 this.age= 2
箭头函数 this.age= 3 每秒输出一条
    */
  1. 通过 call 或 apply 调用箭头函数,thisArg 会被忽略
    var adder = {
      base: 1,
      add: function(a){
        // 箭头函数 this 能访问到上层的 base 
        var f = v => v + this.base;
        return f(a);//返回的是箭头函数的计算结果 
      },
      addThruCall: function(a){
        var f = v => v + this.base;
        var b = {
          base: 2
        };
        // 通过 call() 调用箭头函数 f 指定参数 thisArg 的值是 b,
        // 普通函数的 this 会指向 b, 但是箭头函数会忽略 b 仍然用作用域链上层的 this 
        // 箭头函数中的 this.base 指向 adder 中的 1 而不是 b 中的 2 
        return f.call(b, a);
      },
    };
    //通过 . 语法调用,则 this 指向 adder 
    console.log(adder.add(1));         // 输出 2
    console.log(adder.addThruCall(1)); // 仍然输出 2
  1. 箭头函数不绑定 arguments 对象
  • 也就是说,在箭头函数内调用的 arguments 对象并不是箭头函数自身的,而是外层函数的。
  • 或者说,箭头函数没有自身的 arguments 对象。
    function foo(n) {
      //普通函数内部的箭头函数:arguments[0] 是 n
      var f = () => arguments[0] + n;
      return f();//不是返回箭头函数 f 而是返回 f 的计算结果 
    }
    console.log(foo(3));//输出:6
    // 不在普通函数内部,箭头函数调用 arguments 对象报错
    var arr = () => arguments[0];
    arr();
  • 如果确实需要实现箭头函数与外层函数参数对象的分离,那么最好使用剩余参数(rest parameter)。
    function foo(n) { 
      // 使用剩余参数实现箭头函数与外层函数参数对象的分离
      // args[0] 是箭头函数的第一个剩余参数 2,而不是 n 
      var f = (...args) => args[0] + n; 
      return f(2); 
    }
    console.log(foo(1));//输出:3
  1. 像函数一样使用箭头函数
  • 箭头函数本来就是函数,但它是特殊的函数,所以有些特殊行为:不绑定 this,不绑定 arguments 。
    var obj = {
      i: 10,
      // 箭头函数的 this 指向哪里? App 实例(调用方所在的类)
      b: () => console.log(this.i, this),
      // 普通函数的 this 指向哪里? obj(调用方)
      c: function(){
        console.log(this.i, this);
      }
    }
    //调用方法函数 b() 输出异常,c() 输出正确。
    obj.b(); // undefined App {props: Object, context: Object…}
    obj.c(); // 10 Object {i: 10}
  • 非方法函数用箭头函数来定义,是最佳选择。方法函数不要用箭头函数定义,否则 this 指向错误。
    var obj = {
      a: 10
    };
    // 默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改的。
    Object.defineProperty(obj, 'b', {
      // 一个给属性提供 getter 的方法,当访问该属性时,该方法会被执行,
      // 方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的 this 并不一定是定义该属性的对象)。
      get:() => { // 使用箭头函数,this 指向哪里?App 实例(调用方所在的类)。
        // 我们不希望这样,那么就应该用普通函数。
        console.log(this.a, typeof this.a, this); // undefined "undefined" App {props: Object…}
        return this.a+10;
      }
    });
    Object.defineProperty(obj, 'c', {
      get:function () { // 使用普通函数,this 指向调用方 obj 这才是我们想要的
        console.log(this.a, typeof this.a, this); // 10 "number" Object {a: 10}
        return this.a+10;
      }
    });
    a = obj.b; // a= NaN
    b = obj.c; // b= 20 
  1. 箭头函数的 prototype 属性:箭头函数原型
    var Foo = () => {console.log('箭头函数 Foo')};
    console.log("Foo.prototype=", Foo.prototype);
    // Foo.prototype= Foo {} constructor: Foo() __proto__: Object
    Foo();// 箭头函数 Foo
    // 下面这样调用,和直接调用 Foo() 效果相同
    Foo.prototype.constructor(); // 箭头函数 Foo
  1. 返回对象字面量:要用圆括号把对象字面量包起来
    var func = () => ({foo:1});
    a = func(); // a= Object {foo: 1}
    
    // 用这种简单的语法返回对象字面量是行不通的。
    var func2 = () => { foo: 1 }; // Failed to compile.
    b = func2();
  1. yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。
  2. 箭头函数在参数和箭头之间不能换行。
  3. 解析顺序
  • 虽然箭头函数中的箭头不是运算符,但箭头函数具有与常规函数不同的特殊运算符优先级解析规则。
    var callback;
    callback = callback || function(){};
    // foo = foo || () => {}; // Failed to compile.
    callback = callback || (() => {});
    // 很多情况下,需要这种写法,用于处理默认情况 
    callback();
    // 有时会这样写 
    callback && callback();
  1. 空的箭头函数返回 undefined
    // 什么情况下会用到空的箭头函数呢?
    var empty = () => {};
    a = empty(); // a= undefined
  1. 立即执行函数表达式 IIFE
    // 前面是箭头函数定义,加上括号就是执行
    a = (() => '箭头函数')();// a= 箭头函数
  • 详解 javascript 立即执行函数表达式(IIFE) https://www.cnblogs.com/zichi/p/4401755.html
    • 使用立即执行函数锁住变量保存状态。
    • 立即执行函数在模块化中也大有用处。用立即执行函数处理模块化可以减少全局变量造成的空间污染,构造更多的私有变量。
  1. 使用箭头函数实现数组过滤、映射。。。简洁明了
    var arr = [3, 1, 2, 8, 1, 12, 21];
    //元素求和:前驱值 + 当前值 = 结果,作为下次运算的前驱值  
    var sum = arr.reduce((a, b) => a + b);// 48
    // 过滤,留下奇数,不会自动去重
    var even = arr.filter(v => v % 2 == 1); // [3, 1, 1, 21]
    // 映射:所有元素 2 倍 
    var double = arr.map(v => v * 2); // [6, 2, 4, 16, 2, 24, 42]
  1. 实现更简明的 promise 链
  • 什么是 Promise ?Promise 其实很简单,就是一个处理异步的方法。
  • 为什么要用 Promise ?如果用传统的回调函数来处理异步,存在缺陷:
    • 随着业务逻辑变复杂,回调层级会越来越深。
    • 代码耦合度比较高,不易修改。
    • 每一步操作都需要手动进行异常处理,比较麻烦。不科学。自动化才科学,才靠谱。
  • Promise 的链式调用与中止 https://segmentfault.com/a/1190000007598894
    • 使用 promise 编码之前,可以先思考两个问题。一是如何链式调用,二是如何中止链式调用。
    // promise 链式调用开头,生成一个 promise 对象
    function start(){
      return new Promise((resolve, reject) => {
        resolve('家里蹲大学欢迎您!');
        reject('婴儿不能上大学');
      })
    }
    start().then(data => { //执行 start() 函数返回的 promise 
      console.log("result of start: ", data);
      return Promise.resolve('大一过关'); // 返回一个 promise 对象 p1
    }).then(data => { //执行 p1
      console.log("result of p1: ", data);
      return Promise.reject('大二失败'); // 返回一个 promise 对象 p2
    }).then(data => { //执行 p2
      console.log("result of p2: ", data);
      return Promise.resolve('大三过关'); // 返回一个 promise 对象 p3
    }).catch(ex => { // 捕获异常
      console.log('ex: ', ex);
      return Promise.resolve('大二重修'); // 返回一个 promise 对象 p4
    }).then(data => { //执行 p4
      console.log('result of p4: ', data);
    })
    /** 上面的代码最终会输出:
    result of start:  家里蹲大学欢迎您!
    result of p1:  大一过关
    ex:  大二失败
    result of p4:  大二重修
    */ 

你看看,你-看-看,使用箭头函数多么简明!!!

  1. 箭头函数也可以使用条件(三元)运算符:
    // 定义箭头函数 simple: 条件表达式作为函数体
    var simple = a => a > 15 ? 15 : a; 
    a = simple(16); 
    b = simple(10); 
    console.log("a=", a,"b=", b); // a= 15 b= 10
    
    // 定义箭头函数 max
    let max = (a, b) => a > b ? a : b;
    a = max(1,2); 
    b = max(4,3); 
    console.log("a=", a,"b=", b); // a= 2 b= 4
  1. 箭头函数内定义的变量及其作用域
    // 常规写法
    var greeting = () => {
      let now = new Date();
      return (((now.getHours() > 22) ? '睡了吗?' : '嘎哈呢?') + '老铁');
    };
    a = greeting();
    console.log("a=", a); // a= 嘎哈呢?老铁
    // console.log("now=", now); //标准的 let 作用域:'now' is not defined 
  • 参数括号内定义的变量是局部变量(默认参数)
    var greeting = (now=new Date()) => (now.getHours() < 22 ? '揍嘛里?' : '睡喽迈?') + '老乡';
    a = greeting();
    console.log("a=", a); // a= 揍嘛里?老乡
    // console.log(now);    // 编译失败:'now' is not defined
  • 函数体内{} 用 var 定义的变量是局部变量
    var greeting = () => {
      var now = new Date(); 
      return (now.getHours() > 22 ? '睡了吗?' : '嘎哈呢?') + '老铁';
    };
    a = greeting();
    console.log("a=", a); // a= 嘎哈呢?老铁
    // console.log(now);    // 编译失败:'now' is not defined
  1. 箭头函数也可以使用闭包:
  • 标准的闭包函数
    function foo(){
      var i=0;
      // 返回一个闭包函数:函数内的函数
      return function bar(){
        // 可以访问函数 foo() 内的局部变量
        return (++i);
      };
    };
    a = foo(); //得到一个闭包函数:bar()
    b = a();   //得到计算结果:1
    c = a();   //得到计算结果:2
  • 箭头函数体的闭包
    // 定义箭头函数,返回一个箭头函数:闭包。一行代码实现,够简洁吧?
    var subtract = (i=100) => {return () => --i};
    a = subtract(); // 得到一个闭包函数:() 能访问 subtract() 的局部变量 i
    b = a(); // 得到计算结果:99
    c = a(); // 得到计算结果:98

    // 还能更简洁,但是可读性略差。可以用来装逼。。。
    var subtract2 = (i=100) => () => --i;
    a = subtract2(); 
    b = a(); // 得到计算结果:99
    c = a(); // 得到计算结果:98
  1. 箭头函数递归
    // 定义箭头函数,接收参数 x ,递归调用
    var fact = (x) => x === 0 ? 1 : x * fact(x - 1);
    a = fact(4); // 24

是不是很简洁,是不是很奇妙,是不是很吊。。。

    原文作者:Condy康迪
    原文地址: https://www.jianshu.com/p/7c74496bc739
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞