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

发表于 | 分类于 |

同样是面试被问到的问题,ES6既然允许使用lamda(=>)函数,使用起来简单方便,那么普通函数还有没有存在的意义?箭头函数和普通函数的区别在哪?
这种问题实在是坑,普通函数当然有存在的意义,而且lamda函数在js中有很多限制,达不到普通函数的功效。但是被问到有什么区别,还是一时语塞,不知道从何说起。
一般的了解在做回调的时候用箭头函数更加顺手一些,翻看了一下MDN箭头函数又有了更深的了解。

1、首先箭头函数作为匿名函数,是不能作为构造函数的,不能使用new
2、this,普通函数构造函数的 this 指向了一个新的对象；如果函数是作为对象的方法被调用的，则其 this 指向了那个调用它的对象;但是箭头函数的则会捕获其所在上下文的 this 值，作为自己的 this 值。在使用call或apply绑定时,相当于只是传入了参数,对this没有影响
3、箭头函数不绑定arguments,取而代之用rest参数…解决
4、箭头函数当方法使用的时候没有定义this绑定

1
2
3
4
5
6
7
8
9
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); // prints undefined, Window
obj.c(); // prints 10, Object {...}

5、箭头函数不能当做Generator函数,不能使用yield关键字
6、不能简单返回对象字面量

1
2
3
4
5
6
7
var func = () => {  foo: 1  };
// Calling func() returns undefined!

var func = () => {  foo: function() {}  };
// SyntaxError: function statement requires a name
//如果要返回对象字面量,用括号包裹字面量
var func = () => ({ foo: 1 });

7、箭头函数不能换行

1
2
var func = ()
           => 1; // SyntaxError: expected expression, got '=>'

所以有空多刷刷MDN看看文档还是有好处的