胡熙国

Js 箭头函数

箭头函数是ES6新增的语法，提供了一种更加简洁的函数书写方式，类似于匿名函数，并且简化了函数定义。

完整写法

完整写法类似于匿名函数，省略了function关键字。

var s = (a, b) => {
  console.log(a, b); // 1 2
  return a + b;
};
s(1, 2);

// 相当于
var s = function (a, b) {
  console.log(a, b); // 1 2
  return a + b;
};
s(1, 2);

省略小括号

当参数只有1个时，可以省略小括号，当没有参数或者两个以上的参时不能省略小括号。

var s = (a) => {
  console.log(a); // 1
  return a + a;
};
s(1);

// 相当于
var s = function (a) {
  console.log(a); // 1
  return a + a;
};
s(1);

省略大括号

当函数体只有一行语句时，可以省略{}，并且会自动return这条语句的返回值。

var cmp = (a, b) => a - b;
var a = [5, 4, 3, 2, 1];
var sortedArr = a.sort(cmp);
console.log(sortedArr); // [1, 2, 3, 4, 5]

// 相当于
var cmp = function (a, b) {
  return a - b;
};
var a = [5, 4, 3, 2, 1];
var sortedArr = a.sort(cmp);
console.log(sortedArr); // [1, 2, 3, 4, 5]

省略小括号与大括号

当满足上述两个条件时，小括号与大括号可以全部省略。

var s = (a) => a * 2;
console.log(s(1)); // 2

// 相当于
var s = function (a) {
  return a * 2;
};
console.log(s(1)); // 2

返回对象字面量

省略写法返回对象时注意需要使用()将对象包裹，否则浏览器会把对象的{}解析为箭头函数函数体的开始和结束标记。

var s = (a) => ({ a: a * 2 });
console.log(s(1)); // {a: 2}

// 相当于
var s = function (a) {
  return { a: a * 2 };
};
console.log(s(1)); // {a: 2}

没有单独的 this

箭头函数没有单独的this，在箭头函数的函数体中使用this时，会取得其上下文context环境中的this。箭头函数调用时并不会生成自身作用域下的this，它只会从自己的作用域链的上一层继承this。由于箭头函数没有自己的this指针，使用apply、call、bind仅能传递参数而不能动态改变箭头函数的this指向。

var obj = {
  s1: () => {
    console.log(this);
  },
  s2: function () {
    console.log(this);
  },
};

obj.s1(); // Window ...
obj.s2(); // {s1: ƒ, s2: ƒ}

/*
 在调用时运行的环境是Window，而s1为箭头函数不改变this指向，所以指向Window
 s2为普通函数，可以改变this指向，所以this指向了调用者
*/

var contextObj = {
  e: function () {
    var obj = {
      s1: () => {
        console.log(this);
      },
      s2: function () {
        console.log(this);
      },
    };

    obj.s1(); // {e: ƒ}
    obj.s2(); // {s1: ƒ, s2: ƒ}
  },
};
contextObj.e();
/*
 在调用时运行的环境是contextObj对象，而s1为箭头函数不改变this指向，所以指向contextObj对象
 s2为普通函数，可以改变this指向，所以this指向了调用者
*/

利用箭头函数的this指向特点可以解决一些问题，例如常见的回调函数中this指向问题。

// 常见的回调函数this指向问题
var a = 1;
var obj = {
  a: 2,
  run: function () {
    var callback = function () {
      console.log(this.a);
    };
    setTimeout(callback, 1000); // 1 // 回调函数this调用时指向了Window
  },
};
obj.run();

对于这个问题可以将this值分配给封闭的变量来解决。

var a = 1;
var obj = {
  a: 2,
  run: function () {
    var that = this;
    var callback = function () {
      console.log(that.a);
    };
    setTimeout(callback, 1000); // 2
  },
};
obj.run();

也可以使用bind来事先将函数执行时的this绑定。

var a = 1;
var obj = {
  a: 2,
  run: function () {
    var callback = function () {
      console.log(this.a);
    };
    setTimeout(callback.bind(this), 1000); // 2
  },
};
obj.run();

使用箭头函数可以直接编写回调函数而不改变this指向，箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this。

var a = 1;
var obj = {
  a: 2,
  run: function () {
    var callback = () => {
      console.log(this.a);
    };
    setTimeout(callback, 1000); // 2
  },
};
obj.run();

不绑定 arguments

箭头函数不绑定arguments，在箭头函数函数体内取得arguments只是引用了封闭作用域内的arguments，不会生成自身作用域下的this和arguments值。

function s(a, b) {
  console.log(...arguments); // 1 2
  var ss1 = (c) => {
    console.log(...arguments); // 1 2
  };
  var ss2 = function (c) {
    console.log(...arguments); // 3
  };
  ss1(3);
  ss2(3);
}
s(1, 2);

不能用作构造器

箭头函数不能用作构造器，使用new实例化时会抛出异常。

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

没有原型属性

箭头函数没有prototype属性。

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

不能用作函数生成器

箭头函数不能用作Generator，yield关键字通常不能在箭头函数中使用，除非是嵌套在允许使用的函数内。

贡献者: huxiguo