区别:
箭头函数采用词法作用域
1、相比普通函数更简洁的语法
2、没有this,而是捕获其所在上下文的 this 值,作为自己的 this 值
普通函数:每个新定义的函数都有其自己的 this 值。
3、不能使用new
箭头函数作为匿名函数,是不能作为构造函数的,不能使用new。
4、箭头函数没有原型属性
var a = ()=>{
return 1;
}
function b(){
return 2;
}
console.log(a.prototype);//undefined
console.log(b.prototype);//object{...}
5、不绑定arguments,用rest参数获取函数的多余参数
rest是一个真正的数组,可以使用数组的API
/*常规函数使用arguments*/
function test1(a){
console.log(arguments); //1
}
/*箭头函数不能使用arguments*/
var test2 = (a)=>{console.log(arguments)} //ReferenceError: arguments is not defined
/*箭头函数使用reset参数...解决*/
let test3=(...a)=>{console.log(a[1])} //22
test1(1);
test2(2);
test3(33,22,44);
6、不能直接改变this指向,如使用call()和apply()调用
由于 this 已经在词法层面完成了绑定,通过 call() 或 apply() 方法调用一个函数时,只是传入了参数而已,对 this 并没有什么影响。
7、不能简单返回对象字面量
如果要返回对象时需要用小括号包起来,因为大括号被占用解释为代码块了,正确写法:
let fun5 = ()=>({ foo: x }) //如果x => { foo: x } //则语法出错
8、箭头函数不能当做Generator函数,不能使用yield关键字
9、箭头函数不能换行
let a = ()
=>1; //SyntaxError: Unexpected token =>
10、直接设置默认参数
let x = 'test';
function test2(x,y=x) {
console.log('作用域',x,y);
}
test2('kill'); //kill,kill(优先使用小括号里的x值)
11、箭头函数外层没有普通函数时,严格模式和非严格模式下它的this都会指向window
12、箭头函数的解析顺序相对靠前
虽然箭头函数中的箭头不是运算符,但箭头函数具有与常规函数不同的特殊运算符优先级解析规则。
13、箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
参考:https://www.cnblogs.com/jing-tian/p/11221843.html#_label0
解释:
函数上下文:即 —— 函数里面的this是谁
箭头函数的注意事项:
- 箭头函数一条语句返回对象字面量,需要加括号
- 箭头函数在参数和箭头之间不能换行
- 箭头函数的解析顺序相对靠前
不适用场景:
箭头函数的this
意外指向和代码的可读性。