Vue.js学习笔记——13.扩展：箭头函数的简单使用

一、箭头函数的基本使用

ES6标准中新增了一种定义函数的方法——箭头函数。
通常定义函数有以下几种方法：

1. 使用function定义函数

const fn1 = function (a,b) {
	return a + b
}
function fn2(a,b) {
	return a + b
}

2. 对象字面量中定义函数

const obj = {
	fn3 (a,b) {
		return a + b
	} 
}

3. ES6中的箭头函数:将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体

const fn4 = (a,b) => {
	return a + b
}
(a,b) => {return a + b}

二、箭头函数的参数与返回值

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

const sum = (num1,num2) => {
	return num1 + num2
}
const power = num => {
	return num * num
}

当函数代码块中只有一行代码，大括号和return可以省略，有无返回值取决于代码块内的代码有无返回值

const mul = (num1,num2) => num1*num2
const demo = () => console.log('Hello World')

三、箭头函数this的指向

箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
普通函数的this指向调用它的那个对象。
举例：

steTimeout(function () {
	console.log(this);
})//window

steTimeout(() =>{
	console.log(this);
})//window

const obj = {
	aaa(){
		steTimeout(function () {
		console.log(this);
		})//window

		steTimeout(() =>{
		console.log(this);
		})//{aaa：f}
	}
}

普通函数的this永远指向调用它的对象，所以例子中两个普通函数的this都指向window对象。
而箭头函数的this要在父作用域，即往上一层，一层一层查找，直到有this的定义。在第二个箭头函数中，setTimeout内没有this的定义，所以往外一层找到了aaa的函数作用域，而aaa函数作用域的this就是一个obj对象，所以箭头函数的this指向这个obj对象。