关于箭头函数的思索

自从有了ES6箭头函数这个天真的功用，如今写函数都习气写成箭头函数花样

() => {}

但是假如不理解箭头函数的道理，滥用它也会形成很大的影响。
思索下面这个题目

let func = value => console.log(value)

<!-- 区分 -->

let func = function(value) {
    console.log(value)
}

我们到平台上测试一下, 明显二者不等。

let func = value => console.log(value)

// 等同于

"use strict";
var func = function func(value) {
  return console.log(value);
};

而 console.log()要领返回 undefined
return undefined 与没有返回值一样。所以结果上题目中两种写法没有差别。

let func = value => value
// 等同于
let func = value => {
  return value
}
// 等同于
var func = function func(value) {
  return value;
};

假如箭头函数的代码块部份多于一条语句，就要运用大括号将它们括起来，而且运用return语句返回。

var sum = (num1, num2) => { 
    console.log('多条语句状况');
    return num1 + num2; 
}

那假如我运用了箭头，运用了大括号，没运用return呢？

var sum = (num1, num2) => {
    console.log('多条语句状况');
    num1+num2
}

<!-- 即是-->

'use strict';
var sum = function sum(num1, num2) {
    console.log('多条语句状况');
    num1 + num2; // 这条语句没有任何作用
};

因为大括号被解释为代码块，所以假如箭头函数直接返回一个对象，必需在对象表面加上括号

let getInfo = name => ({ name: name, job: "moving bricks" });

运用箭头函数必须要有返回值吗？

// 假如箭头函数只要一行语句，且不须要返回值
let fn = () => void doesNotReturn(); // void

箭头函数表达式：没有本身的 this arguments super new.target, 不能用作组织函数，没有prototype属性，不能用作生成器

箭头函数不会建立本身的 this, 它只会从本身作用域链的上一层继续this 这点很主要。如下面示例，箭头函数内的this的作用域上一层即 Person 函数内的 this

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向person 对象
  }, 1000);
}

var p = new Person();

箭头函数没有本身的 this 指针， call() apply() bind() 挪用的时刻， 第一个参数会被疏忽 (— 关于这个，我有迷惑。第一个参数会被疏忽是指本来挪用 call 要领的 fun.call(thisArg, arg1, arg2, ...)的 thisArg 会被疏忽呢？照样 arg1会被疏忽呢？ 我们来看栗子

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);
  },

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

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 依然输出 2
console.log(adder.addThruCall('a')); // 输出 24 （23+1）

很明显了，第一个参数会被疏忽 是疏忽 call 要领里的第一个参数(好像是我在思索的时刻想多了，这很明显呀）

参考资本

• es6 箭头函数 — 阮一峰
• 箭头函数 MDN