箭头函数&普通函数 区别

区别：

箭头函数采用词法作用域

 

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意外指向和代码的可读性。