4.箭头函数

ES6新增的定义函数的方式，用于简化函数定义

(参数) => {函数体}
// 通常以这种方式将函数赋值给变量，然后通过变量调用函数
const fn = () => {}

const fn = (i) => {
	console.log(i)
}
fn(1)

若函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

// 传统写法
function sum (num1, num2) {
    return num1 + num2
}

// 箭头函数
const sum = (num1, num2) => num1 + num2
const result = sum(10, 20)
console.log(result)

如果形参只有一个，可以省略小括号

function fn (v) {
	return v*2
}
// 箭头函数写法
const fn = v => v*2

function fn(v) {
    console.log(v)
}

const fn = v => {
    console.log(v)
}

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

const obj = { name: '张三' }
function fn () {
	console.log(this)	// 输出this的值
    // 返回函数返回匿名函数，输出this的值
	return () => {
		console.log(this)
	}
}
// 并通过call方法调用fn函数将this指向obj,并接受返回的匿名函数
const resFn = fn.call(obj)
// 虽然这里是在全局作用域下调用该函数，this本应该指向window
// 但是因为该函数是箭头函数，箭头函数本身不具备this关键字
// this是指向 定义时 上下文的this，即回溯到赋值给 resFn 时，fn中的this
// 这个this因为通过call进行了修改，所以是obj
resFn()

let obj = {
	age: 20,
	say: () => {
		console.log(this.age)
	}
}
obj.say()	// undefined
// 因为使用的是箭头函数，本身并没有this，而是使用父级作用域中的this
// 理论来说，拿到的就是obj对象中的this……
// 但是，obj是对象，对象不具备作用域
// 所以，say方法中的this，最终被定义在全局作用域下
// 因此，全局作用域下的this.age，自然也是undefined

// 如果此时我们在代码前加入
var age = 18
// 就会输出18

// 如果是let就是undefined

使用箭头函数的注意点

1. 使用箭头函数，this的指向不再是window，而是父级(可变)
2. 不能够使用arguments对象
3. 不能作为构造函数，即不可以使用new命令，否则抛出异常
4. 不可以使用yield命令，因为箭头函数不能作为Generator函数

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

1. 声明方式的不同
   1. 普通函数通过function声明
   2. 箭头函数通过 => 声明
2. 箭头函数不能用于构造函数
3. this指向不同