Vue学习之箭头函数的使用和this指向

1. 箭头函数定义：也是一种定义函数的方式

2. 定义函数的方式：

// 方式1：function
const fun1 = function () {

}

//方式2：对象字面量中定义函数
const obj = {
	objFun1:function() {
	
	},
	//fun2等同于fun1
	objFun2 () {
	
	}
}

//方式3：ES6箭头函数
//带参
const fun2 = (参数列表) => {

}

//无参
const fun3 = () => {

}

3. 箭头函数参数和返回值

// 1.放入两个参数
const sum = (num1, num2) => {
	return num1 + num2;
}

//2.放入一个参数
const power = num => {
	return num * num;
}

//3.函数代码块中有多行代码时
const fun4 = () => {
	//打印Hello Word
	console.log('Hello Word');
	//打印Hello Vue
	console.log('Hello Vue');
}

//4.函数代码块中只有一行代码
//默认将结果返回,若函数返回则默认返回undefined
//返回 num1 * num2
const mul = (num1, num2) => num1 * num2;
//返回 undefined
const demo => console.log('Hello Demo');
//返回 APP模板
new Vue ({
	rende: h => (APP)
})

4. 使用情景：将一个函数作为参数传到另外一个函数中时使用

//一般函数写法
setTimeout(function () {

},1000)

//箭头函数写法
setTimeout(() => {}, 1000)

5. 箭头函数中this指向

const obj1 = {

	setTimeout(function(){
		console.log(this); //打印结果Window
	});
	
	setTimeout(() => {
		console.log(this); //打印结果Window
	})
}

//问题：箭头函数中的this如何查找
//结论：向外层作用域中一层层查找this，直到有this的定义
const obj2 = {
	test(){
		setTimeout(function(){
			console.log(this);//Window
		});
	
		setTimeout(() => {
			console.log(this); //Object对象
		})
	}
}

const obj3 = {

	setTimeout(function(){
	
		setTimeout(function(){
			console.log(this); //Window
		})
		
		setTimeout(() => {
			console.log(this); //Window
		})
	});
	
	setTimeout(() => {
	
		setTimeout(function(){
			console.log(this); //Window
		})
		
		setTimeout(() => {
			console.log(this); //Window
		})
	});

}