普通函数与箭头函数
// 执行正常 function 方法名() 会直接将函数提升到顶部所以此步成功
normalFun(2);
// 执行失败 因var会将arrowFun变量提升但赋值仍在原本行无法在赋值前调用
// arrowfun();
// 箭头函数
var arrowFun = ()=>{console.log(this)}
// 正常函数
function normalFun(a){this.a = a; console.log(this)}
// 定义对象cat有两个属性分别保存箭头函数和正常函数所定义的函数
var cat = {
arrowfun: arrowFun,
normalfun: normalFun
}
// 箭头函数所使用的this不会因调用域不同发生改变(会指向创建时作用域的this)
arrowFun(); // this = window
cat.arrowfun() // this = window
// 正常函数所使用this会跟随调用域不同发生改变
normalFun(1); // this = window
cat.normalfun(1); // this = cat
// 执行正常且this指针将指向自身
// 使用new以后会变成一个对象无法以函数方式调用,newNormal()
var newNormal = new normalFun(1);
console.log(newNormal.a);
// 下行代码报错:Uncaught ReferenceError: arrowfun is not defined
// 因箭头函数无法使用new方法调用因箭头函数无构造方法
// var newArrow = new arrowfun();
总结:
1. 定义方式不同
箭头函数 ()=>{}
正常函数 function name(){}
2. this指向不同
箭头函数所使用的this不会因调用域不同发生改变(会指向创建时作用域的this)
正常函数所使用this会跟随调用域不同发生改变
3. 构造函数不同
箭头函数无构造函数无法使用new方式
正常函数有构造函数可以使用new方式但new后不再是函数而是对象
4. 变量提升不同
箭头函数因会使用var来保存,所以会先将var变量名提升但赋值不会提升,所以无法在赋值前调用
正常函数会直接提升到最顶部,所以可以在声明前调用
var that=this;
对于普通函数来说我们想要在函数中使用this的话,我们就要避免和函数的this冲突,因此我们把this赋给另外一个变量that,这样就不会冲突了。
对于回调函数来说,我们尽量使用箭头函数,这样即使不把this赋给that也没有问题