ES6中箭头函数与普通函数this的区别

Posted dsada

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6中箭头函数与普通函数this的区别相关的知识,希望对你有一定的参考价值。

普通函数中的this:

1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 ‘use strict‘),没找到直接调用者,则this指的是 window

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this

默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是window(即继承父级的this);

下面通过一些例子来研究一下 this的一些使用场景

示例1

1
2
3
4
5
6
7
8
9
10
<script>
  var obj = {
    say: function () {
      setTimeout(function () {
        console.log(this)
      });
    }
  }
  obj.say();
</script>

 

结果是:window

匿名函数,定时器中的函数,由于没有默认的宿主对象,所以默认this指向window

问题: 如果想要在setTimeout中使用这个对象的引用呢?

用一个 变量提前把正确的 this引用保存 起来, 我们通常使用that = this, 或者 _this = this来保存我们需要的this指针!

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  var obj = {
    func: function() {},
    say: function () {
      var that = this;   //此时的this就是obj对象
      setTimeout(function () {
        console.log(this)
        that.func()
      });
    }
  }
  obj.say();
</script>

 

示例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.val = 1;
var obj = {
  val: 2,
  dbl: function () {
    this.val *= 2;
    val *= 2;
    console.log(val);
    console.log(this.val);
  }
};
// 说出下面的输出结果
obj.dbl();
var func = obj.dbl;
func();

 

结果是:2  4  8  8

<1> 12行代码调用

val变量在没有指定对象前缀,默认从函数中找,找不到则从window中找全局变量

即 val *=2 就是 window.val *= 2

this.val默认指的是 obj.val ;因为 dbl()第一次被obj直接调用

<2>14行代码调用

func() 没有任何前缀,类似于全局函数,即  window.func调用,所以

第二次调用的时候, this指的是window, val指的是window.val

第二次的结果受第一次的影响

示例3.在严格模式下的this

1
2
3
4
5
6
7
<script>
  function test() {
    ‘use strict‘;
    console.log(this);
  }
  test();
</script>

结果是:undefined

示例4.箭头函数中的this

1
2
3
4
5
6
7
8
9
10
<script>
  var obj = {
    say: function () {
      setTimeout(() => {
        console.log(this)
      });
    }
  }
  obj.say(); // obj
</script>

 此时的this是定义它的对象,即继承父级的this,父级中的this指的是obj,而非window

示例5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  var obj = {
    say: function () {
      var f1 = () => {
        console.log(this); // obj
        setTimeout(() => {
          console.log(this); // obj
        })
      }
      f1();
    }
  }
  obj.say()
</script>

结果:都是obj

f1继承父级this指代的obj,不管f1有多层箭头函数嵌套,都是obj.

示例6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  var obj = {
    say: function () {
      var f1 = function () {
        console.log(this);    // window, f1调用时,没有宿主对象,默认是window
        setTimeout(() => {
          console.log(this); // window
        })
      };
      f1();
    }
  }
  obj.say()
</script>

结果:window,window

第一个this:f1调用时没有宿主对象,默认是window

第二个this:继承父级的this,父级的this指代的是window.

以上是关于ES6中箭头函数与普通函数this的区别的主要内容,如果未能解决你的问题,请参考以下文章

ES6新增-箭头函数与普通函数的区别

区别ES3ES5和ES6this的指向问题。区分普通函数和箭头函数中this的指向问题

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

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

箭头函数中this的指向问题

箭头函数和 this指向