箭头函数中的 this,ES6 中为我们提供了箭头函数,使用起来非常方便:
- const sum = (a, b) = >a + b;
- sum(2, 3); //5
在箭头函数使用中,this 和其他地方的使用是不同的。
箭头函数中的 this 对象是定义所在时的对象,而不是使用时所在的对象。
一般情况下,this 是可变的,但是在箭头函数中 this 是固定的。
- //普通函数
- function foo() {
- setTimeout(function() {
- console.log(this.id);
- },
- 100);
- }
- var id = 22;
- foo.call({
- id: 43
- }); //22
- //箭头函数
- function foo() {
- setTimeout(() = >{
- console.log(this.id);
- },
- 100);
- }
- var id = 22;
- foo.call({
- id: 43
- }); //43
在如上代码中,setTimeout() 函数参数是一个箭头函数,通常情况下,setTimeout() 中的 this 应该指向全局作用域,所以 this 应该指向的是 window 对象,结果应该是输出 22. 但是由于是箭头函数,箭头函数导致 this 总是指向函数定义生效时所在的对象 {id:43},所以在这里,输出的应该是 42.
箭头函数可以让 setTimeout 里面的 this,绑定定义时所在的作用域,而不是指向运行时所在的
作用域。
箭头函数可以让 this 指向固定化,这种特性很有利于封装回调函数。
箭头函数 this 指向的固定化,并不是因为箭头函数内部有绑定 this 的机制,实际原因是箭头函数根本没有自己的 this, 导致内部的 this 就是外层代码块的 this。正是因为这个,所以箭头函数也不能做构造函数。当然也就不能使用 call,apply,bind 来改变 this 的指向。
来源: http://www.2cto.com/kf/201703/613903.html