javaScript--arrow functions(箭头函数)解析

概述

 java现在都支持lambda表达式，js怎么能示弱呢？来来（arrow function）箭头函数走起，跟着大哥有肉吃，哈哈，刚开始学习javaScript，每个人都会想这小哥和java什么关系？关系不大就是有点像。对对跑偏了，言归正传，箭头函数是一般的函数的简写，简写就是图个方便，图方便是要付出代价，它是不能绑定它的this（本对象），arguments（参数对象），super（没有父构造方法）或者new.target（新的目标），箭头函数这么多东西被砍掉了，它非常适合无方法名的函数，它不能用作构造器。

1.语法

基本语法：

//表达式(参数1，参数2，..., paramN) => {表达式}
(param1, param2, …, paramN) => { statements };
(param1, param2, …, paramN) => expression
//等同于: (param1, param2, …, paramN) => { return expression; }

// 当中有一个参数的时候可以省略括号()
(singleParam) => { statements }
singleParam => { statements }

// 对于无参的也应该加上()括号，保证格式完整性
() => { statements }
           

高级语法：

// 圆括号(json格式对象) ，不能去掉圆括号
params => ({foo: bar})

//支持rest 参数 和默认值
(param1, param2, ...rest) => { statements } 
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

//支持解构，简单就是给个规则一一对应
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  
// 6
           

2.简化过程：

var f = [1,2,4,5,6]
//js标准写法
var first = f.map(function(element){
  return element*2;
});
//简化function
var second= f.map((element)=>{
  return element*2;
});
//简化函数体
var third = f.map((element)=>element*2);
console.log(second);//[2, 4, 8, 10, 12]
           

3.不绑定this

除了箭头函数，每个新的函数都有他自己的this值，（相当于一个对象的构造方法），这样上下文函数被称为对象方法，这是非常恼火的面向对象编程方式。

function Person() {
  // this就是类似java的本对象，就是该类自己实例化的对象
  this.age = 0;

  setInterval(function growUp() {
    //growUp自己也有this对象，所以这里this和Person的this是不一样的
    this.age++;
  }, 1000);
}

var p = new Person();
           

在ECMAScript 3/5，被灵活赋值到一个变量替代本对象，这种方式会被淘汰

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    //that就是Person()的this对象
    that.age++;
  }, 1000);
}
           

箭头函数发挥作用的时候到了，就是它没有绑定自己的this。

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 就是引用person的this对象
  }, 1000);
}

var p = new Person();
           

通过Call 或者apply调用 ，它只是通过参数，this将会被忽略

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

  addThruCall: function(a) {
    var f = v => v + this.base;
    var f1 = (function(v) {
      return v+this.base;
    });
    var b = {
      base: 2
    };
            
    return f1.call(b, a);
  }
};

console.log(adder.add(1));         // 打印日志2
console.log(adder.addThruCall(1)); //f箭头函数打印日志2 ，f1普通函数打印日志为3（普通函数绑定this，这是就是b对象，b.base=2）
           

4.不绑定arguments参数对象

//这是简单变量名,当然不是严格模式下，严格模式下会报错
var arguments = 42;
var arr = () => arguments;

arr(); // 42

function foo() {
  var f = (i) => arguments[0] + i; // 这个arguments[0]隐性绑定了1
  return f(2);
}

foo(1); // 3
console.log(foo(1));
           

但是如果我想要传递变量怎么办，这时候可以有rest 参数进行传递

function foo(i){
  var f = (...args)=>args[0]+args[1];
  return f(2,i);
}
console.log(foo(12))//结果14
           

5.箭头函数的例子

'use strict';
//只要{} 里面就是键值对,值可以普通，也可是函数
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}
obj.b(); // prints undefined, Object {...}
obj.c(); // prints 10, Object {...}
           

6.箭头函数不能new，因为它没有绑定构造函数

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor ,抛出异常
           

7.箭头函数不能使用（prototype）原生属性

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

8.对于箭头函数的主体如果是单一，不用写return，如果是块语句必须用return(也就是用{}包裹的语句)

var func = x => x * x;                  
//自动会给你添加return

var func = (x, y) => { return x + y; }; 
//这个必须自己写个return            
var f=()=>{return {bb:12}};
console.log(f());
           
         
 9.返回json格式的对象字符串       
     
var func = () => { foo: 1 };               
// Calling func() returns undefined!（未定义）

var func = () => { foo: function() {} };   
// SyntaxError: function statement requires a name 语法错误
//因为{foo:function(){}}当做一条语句执行，而不是对象中键值对。
//改进一下
var func= ()=> {return ({foo:function(){}})}
           
     
 10.不允许箭头函数在=>位置错行       
     
var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'
           
     
 11.箭头的函数解析规则       
     
let callback;

callback = callback || function() {}; // 这样写没毛病

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments   报错 ()=>{}不是一个整体

callback = callback || (() => {});    // 这样写也没问题
           
     
 12.更多例子：       
     
// empty返回undefined
let empty = () => {};

(() => 'foobar')(); 
// Returns "foobar"
// (this is an Immediately Invoked Function Expression 
// see 'IIFE' in glossary)

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

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

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);  
// 66
//过滤偶数
var even = arr.filter(v => v % 2 == 0); 
// [6, 0, 18]

var double = arr.map(v => v * 2);       
// [10, 12, 26, 0, 2, 36, 46]

// More concise promise chains
promise.then(a => {
  // ...
}).then(b => {
   // ...
});

// Parameterless arrow functions that are visually easier to parse
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);