[TOC] #### 前言 --- ES6 新增了一种新的函数: 箭头函数，它不仅让代码更简洁，还解决了传统函数中 `this` 指向不明的问题 箭头函数相当于匿名函数，简化了函数定义，将原函数的 function 关键字和函数名都删掉，并使用 `=>` 连接参数和函数体 #### 1. ES6 前定义函数 --- ```javascript // function 关键字 function add(num1, num2) { return num1 + num2; } // 函数表达式 const sub = function (num1, num2) { return num1 - num2; } // 对象字面量中定义函数 const obj = { mul: function (num1, num2) { return num1 * num2; } } ``` #### 2. ES6 箭头函数语法 --- 当没有参数时, 可以定义为以下形式 ```javascript const test = () => { } ``` 当只有一个参数时，括号可以省略。但是，如果这个参数是解构赋值，括号不能省略 ```javascript const test = res => { console.log(res); } const test = ({ code, msg }) => { console.log(res); } ``` 当有多个参数时，括号不能省略 ```javascript const test = (num1, num2) => { return num1 + num2; } ``` 当函数体只有一行语句时，可以省略 `{}`，右侧表达式的结果为箭头函数的返回值 ```javascript const test = (num1, num2) => num1 + num2; ``` 使用箭头函数的场景: 闭包函数 ```javascript setTimeout(() => { }, 1000) array.filter(item => item > 10) ``` #### 3. ES6 箭头函数返回值 --- 当方法体只有一条语句时可以省略花括号 ```javascript // 普通写法 // const math = (num1, num2) => { // return num1 + num2 // } // 省略 {} const math = (num1, num2) => num1 + num2 ``` 当箭头函数需要返回一个数据时，可以使用下面写法 返回值是 `字符串，数组，布尔值` 时，`=>` 后面直接跟上数据即可，返回值如果是键值对形式的对象，需要使用 `({})` ```javascript const demo = { // 返回值是 [] a1: () => [], // 返回值是 'abc' a2: () => 'abc', // 返回值是 true a3: () => true, // 返回值是键值对的对象时 需要使用 ({}) // 因为使用 () => {} , {} 会被当作方法体的定界符 a4: () => ({ name: 'liang' }), ``` 箭头函数直接返回一个数据的写法，在特殊场景下可以简化代码 ```javascript // 只保留 users 数组对象中的 id 和 name 字段 const users = [ { id: 1, name: 'liang', age: 20, job: 'php' }, { id: 2, name: 'maria', age: 25, job: 'html' }, { id: 3, name: 'wang', age: 30, job: 'css' } ] const live = users.map(({ id, name }) => ({ id, name })) ``` #### 4. 箭头函数中的 this 到底是谁 ? ---- 箭头函数中的 this 指向问题是一个非常经典的问题 标准答案: 向外层作用域一层层的查找 this，直到有 this 的定义 #### 5. 为什么需要箭头函数 ? ---- 箭头函数的意义：消除函数的二义性 什么是函数的二义性 ？ 在 ES5 及以前，JS 中的 `function` 关键字承载了过多相互冲突的语义角色。当有一段 `function` 代码时，无法仅凭定义就确定它的行为，必须结合调用方式才能判断，这种定义与行为的不确定性，就是二义性 函数的两种含义：指令序列（函数中的代码从上到下执行一遍）、构造器（用于创建一个实例） ```javascript function user() { } user() // 指定序列 new user() // 构造器 Date() // 指定序列 new Date() // 构造器 ``` 为了解决函数的二义性，ES6 推出了箭头函数和类（函数的语法糖写法）来解决这个问题 ```javascript const user = () => { } user() // 箭头函数只能直接调用，不能实例化使用 class info { } new info() // 类只能实例化使用，不能 info() 直接调用 ```