2020-10-18 箭头函数

箭头函数

借鉴于网上的内容

语法

基础语法

1、当只有一个参数的时候，圆括号可以省略

param1 => {statements}

2、当无参数时，用圆括号代替

() => {statements}

高级语法

1、加括号的函数体返回对象字面量表达式：

params => ({foo:bar})

2、支持剩余参数和默认参数

3、支持参数列表解析

let f = ([a,b] = [1,2],{x:c} = {x:a+b}) => a+b+c;
f();

描述

1、更短的函数

当箭头函数只有一个return时，可以省略关键字’return’和方法的花括号

2、没有单独的this

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

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

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

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

还有其它的等等

2、箭头函数不会创建自己的this,它会从自己作用链的上一层继承this

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

var p = new Person();
//此时两个this的指向一样
//箭头函数作用链的上一层就是Person()

3、在箭头函数中，鉴于this是语法层面上的，因此严格模式中与this相关的规则都将被忽略，其它的规则不变

4、不能通过call apply bind来改变this的指向。由于箭头函数没有自己的this指针，通过call()或apply()以及bind()方法调用一个函数时，只能传递参数(不能绑定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 b = {
      base : 2
    };
            
    return f.call(b, a);//此时的this指向并没有改变为b,依旧指向作用链上一层adder()
  }
};

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

3、不绑定argumnets

箭头函数不绑定arguments对象

ar arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n,
                                //即传给foo函数的第一个参数
  return f();
}

foo(1); // 2
foo(2); // 4
foo(3); // 6
foo(3,2);//6    输入两个参数也是只用第一个参数，忽略第二个

4、使用箭头函数作为方法

箭头函数对于非方法函数是非常合适的

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); //严格模式下作为方法调用，会显示为未定义
// undefined, Window{...}
obj.c(); 
// 10, Object {...}

箭头函数没有定义this绑定

'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10; 
   // 代表全局对象 'Window', 因此 'this.a' 返回 'undefined'
  }
});

obj.b; // undefined   "undefined"   Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window,

5、使用new操作符

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

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

6、使用prototype属性

箭头函数没有prototype属性（返回对象原型的引用）

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

7、使用yield关键字

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

函数体

箭头函数可以有一个“简写体”或常见的“块体”。

在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。
在块体中，必须使用明确的return语句。

var func = x => x * x;                  
// 简写函数 省略return

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

返回对象字面量

返回对象字面量时，要记得把对象字面量用（）给包起来

var func = () => { foo: 1 };               
// Calling func() returns undefined!

var func = () => { foo: function() {} };   
// SyntaxError: function statement requires a name

因为花括号的代码会被解析成一系列的语句（即foo会被解析成一个标签，而非对象字面量的组成部分）

换行

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

解析顺序

箭头函数具有与常规函数不同的运算符优先级规则

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

更多示例

// 空的箭头函数返回 undefined
let empty = () => {};

(() => 'foobar')(); 
// Returns "foobar"
// (这是一个立即执行函数表达式,可参阅 'IIFE'术语表) 


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]

// 更简明的promise链
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

// 无参数箭头函数在视觉上容易分析
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);

箭头函数内定义的变量及其作用域

// 常规写法
var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined 标准的let作用域

// 参数括号内定义的变量是局部变量（默认参数）
var greeting = (now=new Date()) => "Good" + (now.getHours() > 17 ? " evening." : " day.");
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined

// 对比：函数体内{}不使用var定义的变量是全局变量
var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting();           //"Good day."
console.log(now);     // Fri Dec 22 2017 10:01:00 GMT+0800 (中国标准时间)

// 对比：函数体内{} 用var定义的变量是局部变量
var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now);    // ReferenceError: now is not defined

箭头函数可使用闭包

// 标准的闭包函数
function A(){
      var i=0;
      return function b(){
              return (++i);
      };
};

var v=A();
v();    //1
v();    //2


//箭头函数体的闭包（ i=0 是默认参数）
var Add = (i=0) => {return (() => (++i) )};
var v = Add();
v();           //1
v();           //2

//因为仅有一个返回，return 及括号（）也可以省略
var Add = (i=0)=> ()=> (++i);

箭头函数递归

var fact = (x) => (x==0 ? 1:x*fact(x-1));
fact(5);//120