关于箭头函数的思考

时间 2019-12-05

原文原文链接

关于箭头函数的思考

自从有了ES6箭头函数这个灵活的功能，如今写函数都习惯写成箭头函数格式es6

() => {}

然而若是不理解箭头函数的原理，滥用它也会形成很大的影响。
思考下面这个问题app

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语句返回。this

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

那若是我使用了箭头，使用了大括号，没使用return呢？prototype

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

使用箭头函数必需要有返回值吗？code

// 若是箭头函数只有一行语句，且不须要返回值
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 方法里的第一个参数(好像是我在思考的时候想多了，这很明显呀）

参考资源