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

普通函数

语法格式：function(){}

箭头函数

语法格式：() => {}

()中定义参数，如果只有一个参数，可以不写括号
{}中写函数体，如果函数体中只有返回值，可以不写return

Demo01普通函数：

创建一个对象，输出姓名，此时内容是正确输出的

JS

let obj={
    name:'小明',
    age:12,
    sayname(){
	console.log(this.name); // 小明
        // console.log(`我是${name}`);
    }
}
obj.sayname();

Demo2：

在 sayname()函数中添加一个定时器，再次输出this此时输出的结果是window对象

但是在定时器之外输出this.name 输出内容是 小明

JS

let obj={
    name:'小明',
    age:12,
    sayname(){
	console.log(this.name); // 小明
	setTimeout(function(){
		console.log(this); // window对象
	},500)
    }
}
obj.sayname();

Demo3：

那么如果想让其在定时器内输出小明该怎么做呢，普通函数可以通过传值的方式实现

JS

let obj={
    name:'小明',
    age:12,
    sayname(){
	let self = this;
	setTimeout(function(){
		console.log(self.name); // 小明
	},500)
    }
}
obj.sayname();

Demo4:箭头函数

JS

let obj = {
	name: '小明',
	age: 12,
	sayname() {
		setTimeout(() => {
		console.log('我是' + this.name);
	}, 500)
    }
}
obj.sayname();

区别说明：

1. this 指向不同
2. 普通函数，谁调用指向谁，this指向谁
3. 箭头函数，在哪里定义函数，this指向谁