关于箭头函数和普通函数

前言

箭头函数是ES6中新增的特性，因其在语言上的简洁性，相信不少人都很是喜欢使用它。对于初学者来讲，对于箭头函数的熟练使用与深入理解须要一个过程。本文总结一下普通函数与箭头函数的区别，但愿可以使这一过程加速。

基本语法

ES6容许使用“箭头”（=>）定义函数。具体的定义，能够看下面的例子。

var f = v => v

// 等同于
var f = function (v) {
  return v
}
复制代码

能够看出，定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了function关键字，采用箭头=>来定义函数。函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中。

箭头函数的参数

一、若是箭头函数没有参数，直接写一个空括号便可。

var f = () => 5
// 等同于
var f = function () { return 5 }
复制代码

二、若是箭头函数的参数只有一个，也能够省去包裹参数的括号。

var f = v => v

// 等同于
var f = function (v) {
  return v
}
复制代码

三、若是箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中便可。

var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function(num1, num2) {
  return num1 + num2
}
复制代码

箭头函数的函数体

一、若是箭头函数的函数体只有一句代码，就是简单返回某个变量或者返回一个简单的JS表达式，能够省去函数体的大括号{ }。

var f = v => v
复制代码

二、若是箭头函数的函数体只有一句代码，就是返回一个对象，要使用（）

// 用小括号包裹要返回的对象，不报错
let getTempItem = id => ({ id: id, name: "Temp" });

// 但毫不能这样写，会报错。
// 由于对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };
复制代码

三、若是箭头函数的函数体只有一条语句而且不须要返回值（最多见是调用一个函数），能够给这条语句前面加一个void关键字

let fn = () => void doesNotReturn()
复制代码

箭头函数实际使用场景

一、箭头函数能够与变量解构结合使用。能够用在请求接口时，只接受的返回数据中须要的字段。

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}
复制代码

二、箭头函数能够简化回调函数。

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);
复制代码

三、rest参数与箭头函数结合简化开发。

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]
复制代码

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

箭头函数中的this指向

一、箭头函数没有原型prototype

let a = () =>{};
console.log(a.prototype); // undefined
复制代码

二、箭头函数不会建立本身的this

箭头函数不会建立本身的this，因此它没有本身的this，它只会从本身的做用域链的上一层继承this。

箭头函数没有本身的this，它会捕获本身在定义时（注意，是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。因此，箭头函数中this的指向在它被定义的时候就已经肯定了，以后永远不会改变。

var id = 'Global';

function fun1() {
    // setTimeout中使用普通函数
    setTimeout(function(){
        console.log(this.id);
    }, 2000);
}

function fun2() {
    // setTimeout中使用箭头函数
    setTimeout(() => {
        console.log(this.id);
    }, 2000)
}

fun1.call({id: 'Obj'});     // 'Global'

fun2.call({id: 'Obj'});     // 'Obj'
复制代码

三、不能修改箭头函数的this指向

因为箭头函数的this定义时就已经肯定且永远不会改变。因此使用这些方法永远也改变不了箭头函数this的指向，虽然这么作代码不会报错。

var id = 'Global';
// 箭头函数定义在全局做用域
let fun1 = () => {
    console.log(this.id)
};

fun1();     // 'Global'
// this的指向不会改变，永远指向Window对象
fun1.call({id: 'Obj'});     // 'Global'
fun1.apply({id: 'Obj'});    // 'Global'
fun1.bind({id: 'Obj'})();   // 'Global'
复制代码

四、箭头函数不能做为构造函数使用

咱们先了解普通函数new构造函数的步骤：

• ``JS```内部首先会先生成一个对象。
• 再把函数中的this指向该对象。
• 而后执行构造函数中的语句。
• 最后隐式的返回this。

可是箭头函数没有本身的this，它的this实际上是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，因此箭头函数不能做为构造函数使用，或者说构造函数不能定义成箭头函数，不然用new调用时会报错！

let Fun = (name, age) => {
    this.name = name;
    this.age = age;
};

// 报错
let p = new Fun('cao', 24)
复制代码

五、箭头函数没有本身的arguments

箭头函数没有本身的arguments对象。在箭头函数中访问arguments实际上得到的是外层局部（函数）执行环境中的值。

除了arguments、this如下两个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：super、new.target。

(1) 箭头函数的this指向全局对象，会报arguments未声明的错误。

let b = () => {
  console.log(arguments);
};
b(1, 2, 3, 4); // Uncaught ReferenceError: arguments is not defined
复制代码

(2) 箭头函数的this若是指向普通函数,它的argumens继承于该普通函数。

function bar() {
  console.log(arguments); // ['bar']
  bb('bb');
  function bb() {
    console.log(arguments); // ["bb"]
    let a = () => {
      console.log(arguments); // ["bb"]
    };
    a('箭头函数的参数'); // this指向bb
  }
}
bar('bar');
复制代码

能够在箭头函数中使用rest参数代替arguments对象，来访问箭头函数的参数列表！！

rest参数获取参数列表

ES6 引入 rest参数（形式为...变量名），用于获取函数的多余参数，这样就不须要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

let a = (a, ...bcd) => {
  console.log(a, bcd); // 1 [2, 3, 4]
};
a(1, 2, 3, 4);
复制代码

上面的例子除了第一个参数肯定外，用一个变量接收其余的变量。固然你也可使用一个变量接收全部的参数。

rest参数须要注意的点

一、rest 参数必须是最后一个参数，不然会报错。

// 报错
function f(a, ...b, c) {
  // ...
}
复制代码

二、rest 参数没有函数的length属性。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1
复制代码

六、箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名

function func1(a, a) {
  console.log(a, arguments); // 2 [1,2]
}

var func2 = (a,a) => {
  console.log(a); // 报错：在此上下文中不容许重复参数名称
};
func1(1, 2); func2(1, 2);
复制代码

七、语法更加简洁、清晰

从上面的基本语法示例中能够看出，箭头函数的定义要比普通函数定义简洁、清晰得多，很快捷。

箭头函数的不适用场景

本段摘自阮一峰ES6入门了解详情可点击参考。

一、定义对象的方法，且该方法内部包括this。

const cat = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}
复制代码

上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。调用cat.jumps()时，若是是普通函数，该方法内部的this指向cat；若是写成上面那样的箭头函数，使得this指向全局对象，所以不会获得预期结果。这是由于对象不构成单独的做用域，致使jumps箭头函数定义时的做用域就是全局做用域。

二、须要动态this的时候，不该使用箭头函数。

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});
复制代码

上面代码运行时，点击按钮会报错，由于button的监听函数是一个箭头函数，致使里面的this就是全局对象。若是改为普通函数，this就会动态指向被点击的按钮对象。

本章内容小结

箭头函数的使用

1. 箭头函数能够与变量解构结合使用。能够用在请求接口时，只接受的返回数据中须要的字段。
2. 箭头函数能够简化回调函数。
3. 若是箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中便可。

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

1. 箭头函数没有原型prototype。
2. 箭头函数不会建立本身的this。
3. 不能修改箭头函数的this指向。
4. 箭头函数不能做为构造函数使用。
5. 箭头函数没有本身的arguments。（super、new.target也没有）。
6. 箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名。
7. 语法更加简洁、清晰。

箭头函数不适用场景

1. 箭头函数的this意外指向和代码的可读性。

注意事项：

1. 箭头函数一条语句返回对象字面量，须要加括号。
2. 箭头函数在参数和箭头之间不能换行。
3. 箭头函数的rest参数须要放在最后。

参考文章

• js 普通函数和es6箭头函数的区别以及箭头函数的注意事项、不适用场景
• 阮一峰ES6入门
• 箭头函数与普通函数的区别总结

总结

箭头函数是ES6重点知识了，不论是在面试上，仍是在平时开发中，都是常常会被问道且使用到的知识。所以，咱们应该系统的去掌握和深刻理解它。但愿还不是很熟练的童鞋要抓紧时间学习，它值得咱们你们花时间去整理和总结。