箭头函数的定义
ES6 新增了箭头函数 (Arrow function) 的概念，相对于传统的函数声明，箭头函数更加简洁易懂。箭头函数是一种匿名函数，可以使用匿名函数的多种语法。
箭头函数的格式如下：
(params) => {statements}其中，params 表示函数的参数，可以是多个参数，也可以是一个，如果没有参数，需要写一个空括号 () ；statements 表示函数体，可以是多个语句。
普通函数和箭头函数的区别
在使用箭头函数时，需要注意其与普通函数的区别。
this的指向不同
箭头函数的 this 指向是静态的，指向函数定义时所处的对象。而普通函数的 this 指向是动态的，指向调用时所处的对象。具体来说，箭头函数的 this 就是在函数定义时所处的上下文所绑定的对象。
-- -------------------- ---- -------
--- --- - -
----- ------
------ -------- -- -
---------------- --- ---------------
--
----------- -- -- -
---------------- --- ---------------
-
--
------------ -- --- --- ---
----------------- -- --- --- ---------在这个例子中，普通函数 sayHi 的 this 指向的是定义时的对象 obj，而箭头函数 sayHiArrow 的 this 指向的是上一级父级作用域的 this，即全局对象 window，所以输出的是 undefined。
- 箭头函数没有
arguments对象
箭头函数没有 arguments 对象，因此无法直接访问传入的参数。需要使用 rest parameters（“...”）解决这个问题。
-- -------------------- ---- ------- -------- ------ - ----------------------- - ------- -- --- -- -- --- -- -- --- --------- - --------- -- - ------------------ - ------------ -- --- -- -- --- -- --
- 箭头函数不能作为构造函数
由于箭头函数没有自己的 this，因此不能用 new 来调用。如果用 new 调用箭头函数，会报错。
var Person = (name, age) => {
this.name = name;
this.age = age;
}
var p = new Person('Bob', 28); // Uncaught TypeError: Person is not a constructor- 箭头函数没有原型
针对箭头函数不能作为构造函数这一点，我们也可以很容易地理解箭头函数没有原型这一特点。
var func = () => {};
console.log(func.prototype); // undefined箭头函数的应用场景
由于箭头函数的特点，其适用于一些特定的场景中。以下是一些常见的箭头函数的应用场景：
- 适用于回调函数的场景
箭头函数可以在一定程度上消除函数声明带来的冗余，适用于只需要短小的回调函数的场景。
var arr = [1, 2, 3, 4, 5]; var res = arr.map(item => item * 2); console.log(res); // 输出 [2, 4, 6, 8, 10]
- 适用于简化对象方法的定义
箭头函数可以更加简单地定义对象方法。
var obj = {
name: 'Bob',
sayHi: () => {
console.log(`Hi, I'm ${this.name}`);
}
};
obj.sayHi(); // Hi, I'm undefined- 适用于使用
bind固定this的场景
由于箭头函数本身没有 this，因此在需要固定函数内部的 this 时，可以使用箭头函数与 bind 方法结合使用来实现。
-- -------------------- ---- -------
--- --- - -
----- ------
------ -------- -- -
---------------- --- ---------------
-
--
--- ---------- - -- -- -
----------------------
--
------------- -- --- --- ---总结
以上就是 ES6 中箭头函数和普通函数的区别及应用场景的详细介绍。需要注意的是，虽然箭头函数可以在很多场景下取代传统的函数声明，但是由于它的特殊性，我们需要谨慎使用，并在不同场景中合理地选择合适的函数类型。
示例代码
-- -------------------- ---- -------
-- ------------
--- --- - -
----- ------
------ -------- -- -
---------------- --- ---------------
--
----------- -- -- -
---------------- --- ---------------
-
--
------------ -- --- --- ---
----------------- -- --- --- ---------
-------- ------ -
-----------------------
-
------- -- --- -- -- --- -- --
--- --------- - --------- -- -
------------------
-
------------ -- --- -- -- --- -- --
--- ------ - ------ ---- -- -
--------- - -----
-------- - ----
-
--- - - --- ------------- ---- -- -------- ---------- ------ -- --- - -----------
--- ---- - -- -- ---
---------------------------- -- ---------
-- ---------
--- --- - --- -- -- -- ---
--- --- - ------------ -- ---- - ---
----------------- -- -- --- -- -- -- ---
--- --- - -
----- ------
------ -- -- -
---------------- --- ---------------
-
--
------------ -- --- --- ---------
--- --- - -
----- ------
------ -------- -- -
---------------- --- ---------------
-
--
--- ---------- - -- -- -
----------------------
--
------------- -- --- --- ---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d1a9c48841e98949d2079