面试之 -- 箭头函数和普通函数的区别

箭头函数是 ES6 中常用的语法, 也是面试中高频考题之一

基本用法

• 1. 基础语法

   var a = function() {};
   var a = () => {};

• 2. 只有一条语句

    var sum = function(a, b) {
      return a + b;
    };

    var sum = (a, b) => a + b;

• 3. 多条语句, 需要使用{} + return

    var sum = (a, b) => {
      const sum = a + b;
      return sum;
    };

• 4. 如果直接返回一个对象, 则需要使用小括号包裹

var sum = (a, b) => ({ num1: a, num2: b });

箭头函数和普通函数的区别

• 1. 箭头函数内的this, 是定义时所在的对象, 而不是使用时所有的对象(调用者), 且不能使用call, apply, bind改变this指向

    // 普通函数
    var name = "jojo";
    var obj = {
      name: "ming",
      callName: function() {
        console.log(this.name);
      }
    };
    obj.callName(); // 此时指向调用者obj

   // 箭头函数
    var name = "jojo";
    var obj = {
      name: "ming",
      callName: () => {
        console.log(this.name); // 指向定义时所在的对象
      }
    };
    obj.callName();
    var obj1 = { name: "xiaohong" };
    obj.callName.call(obj1); // 无法改变this指向

• 2. 箭头函数不能作为构造函数调用

    let Func = () => {
      console.log(1);
    };
    const obj = new Func(); // 报错

• 3. 箭头函数不绑定arguments

   // 普通函数
   var func = () => {
      console.log(arguments);
    };
    func("a", "b", "c"); // 报错
    // 箭头函数
    var func = (...args) => {
      console.log(args);
    };
    func("a", "b", "c");

• 4. 箭头函数不能使用yield命令, 因此箭头函数不能用作 Generator 函数。

   // 普通函数
    function* m() {
      yield 1;
      yield 2;
      yield 3;
    }
    var result = m();
    m.next();
    m.next();

• 总结: 箭头函数没有自己的this, 所以也无法通过call, apply, bind改变this指向.对于不需要改变this指向的情况, 可以考虑使用箭头函数