前言：
箭头函数是ES6新增的定义函数的方式，我们可以使用 ()=>{} 来顶替以前的函数定义方式，下面从五个 使用 姿势与三点 注意事项 来刨析箭头函数。
使用
简略编写
当我们箭头函数函数只有一个参数的时候是可以将 () 省略，当代码块只有一行的时候可以将 {} 与 return 省略
const fn = num => num.sort(); console.log(fn([2, 1, 3])); // [1,2,3]
如上代码块只有一个参数 num 且只有一行代码 return num.sort() ，所以将 () ， {} 与 return 省略
结合解构赋值
为了进一步简化还可以与解构赋值结合使用
let person = {
?name: "猪痞恶霸",
?age: 12,
};
const fn = ({ name, age }) => name + "今年" + age + "岁了";
console.log(fn(person)); // 猪痞恶霸今年12岁了
使用解构赋值直接将 name 与 age 解构，替换了 person,name 的用法，使函数更加简洁。
结合扩展运算符
在函数参数定义中可以结合 rest 参数搭配使用
const fn = (...arr) => arr.sort(); console.log(fn(2, 1, 4)); // [1,2,4]
使用 ...arr 将所有参数都包裹在内，在函数体内进行一些需要的操作。
this 指向的改变
在箭头函数中使用 this ，它的指向是不变的，因为箭头函数没有拥有属于自己的 this ，其指向的是 函数定义时 所在的对象 , 所以箭头函数的出现往往就顶替了我们常用的 let _that = this 又或者在函数结尾使用绑定 this 指向的对象来解决在函数体内 this 的问题
var name = "fzf404";
function set() {
?setTimeout(() => {
? ?console.log(this.name);
}, 1000);
}
set(); // fzf404
set.call({ name: "猪痞恶霸" }); // 猪痞恶霸
如上例子，在全局中声明了一个 name 变量，我们再通过 call() 绑定新的对象 { name: "猪痞恶霸" } ，在 set 函数执行的时候，箭头函数被定义，而被定义的时候其已经通过 set.call() 更改了指向的对象，所以打印出的是新的对象中的 name 属性，这就是箭头函数的 this 指向特点，如果是普通函数，其指向依旧是顶层对象。
绑定this
在之前ES5可以通过 bind ， call ， apply 来显式绑定 this 对象，而箭头函数的出现打破了这种局面，同时也配套使用 :: 来作为函数绑定的方式
:: 的使用方法：将要绑定的对象放在 :: 的左边，函数放在 :: 的右边，执行后，函数内的 this 就会指向绑定的对象
obj::fn // 等同于 fn.bind(obj)
如上，原来的显式绑定方式与使用 :: 的绑定方式进行一个比较，看过二者的比较就可以了解 :: 的使用了。
注意细节
关于构造
箭头函数无法作为一个构造函数，所以无法通过 new 命令来构造
const fn = () => {}
let _fn = new fn() // fn is not a constructor
如上，如果使用 new 来构造的化就会抛出 fn 不是一个 构造函数
关于参数对象
在箭头函数内是无法使用 arguments 即参数对象，因为在其函数体内部不存在 arguments 对象当然我们可以使用扩展运算符来代替其使用，比使用参数对象方便。
const fn = () => {
? ?console.log(arguments)
}
fn() // arguments is not defined
关于yield命令
箭头函数无法使用yield命令，也就是说无法将箭头函数转变为生成器函数，具体是为什么，我的直观感受就是作为生成器必须是 function* ，而箭头函数的形式无法作为一个生成器。
了解到这里，下面我们来看一道经典的面试题。
面试题
let name = "猪痞恶霸";
let person = {
? ?name:"fzf404",
? ?fn: () => {
? ? ? ?setTimeout(() => {
? ? ? ? ? ?console.log(this.name);
? ? ? })
? }
}
person.fn();
上面是一道考察 箭头函数 ， this指向 ， 作用域 的面试题，它的打印结果为 undefined ，我们来一点一点分析
使用 let 在下声明了一个 name 再声明一个对象，内含一个 name 属性和一个方法，该方法使用定时器并打印 this.name 调用对象的这个方法， this 开始寻找 定时器中的箭头函数没有 this ，向上寻找，到达 person ，由于 person 是一个对象，所以它的 {} 包裹的不是作用域 继续向上寻找，到达了顶层对象 window 查看 window 内是否含有 name 属性，由于使用 let 声明，所以其属性不在 window 中，打印出 undefined到此这篇关于JavaScript箭头函数的五种使用方法及三点注意事项的文章就介绍到这了,更多相关JS箭头函数内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
查看更多关于JavaScript箭头函数的五种使用方法及三点注意事项的详细内容...