箭头函数与普通函数的区别，ES6中好用的模板字符串-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43743402/article/details/123299874

一、箭头函数与普通函数的区别
普通函数：
例子：

//函数声明的写法
 function fun(){
	reurn 100;
}
//或者函数表达式的写法
const fun = function(){
	return 100;
}
console.log(fun());//100

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

const fun =() =>{
	return 100;
}
//上面函数的另一种写法（写法2）
const fun = （） => 100
console.log(fun());//100

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

//箭头函数
let obj = {
	name :"小明",
	age:2,
	sayName(){
		setTimeout(() =>{
			console.log("我是"+this.name)//输出“我是小明”
		},500)
	}
}
obj.sayName();
//普通函数
let obj = {
	name : "小明",
	age : 2,
	sayName(){
		setTimeout(function(){
			console.log("我是"+ this.name)//输出“我是”，则不能输出“小明”
			//由于setTimeout这个函数是window调用的，因此这个this指向window
		})
	}
}
obj.sayName();

由此可见，普通函数和箭头函数区别在于：
1、this指向不同
普通函数，谁调用这个函数，this就指向谁
箭头函数,在哪里定义函数，this就指向谁（箭头函数不会改变this指向）
二、ES6中好用的模板字符串
例子：

//普通写法
let a = 'hello world';
let b = 'test';
let str = "我是\"超人\"";
//使用模板字符串写法
<html>
<body>
	<div class="container"></div>
	<script>
	let container = document.querySelector(".container");
	let banana = "香蕉";
	let apple = "苹果";
	container.innerHTML=`<ul>
							<li>${banana}</li>
							<li>${banana}</li>
						</ul>`
	</script>
</body>
</html>

由此可见模板字符串可支持代码换行。