欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6箭头函数中的this指向介绍

程序员文章站 2022-03-13 12:21:05
一般函数的this 为了搞清楚箭头函数中的this指向,我们需要先清楚一般函数中的this指向。 假如,我们在浏览器中输入: function o(){ thi...

一般函数的this

为了搞清楚箭头函数中的this指向,我们需要先清楚一般函数中的this指向。

假如,我们在浏览器中输入:

function o(){
    this.a=5;
}
o();
console.log(window.a);//5

我们会发现,window环境中多了一个变量a,并且其值为5。这是因为作为一般函数的o函数,其中的this指向window。当执行o函数的时候,就给window对象增加了一个a属性。

但是,如果我们在函数内部使用严格模式:

function o(){
    'use strict';
    this.a=5;
}

则会报错:

Uncaught TypeError: Cannot set property 'a' of undefined

意思是不能给undefined设置a属性。显然严格模式下,一般函数中的this指向了undefined。

ES6箭头函数的this指向

在箭头函数出现之前,每个新定义的函数都有其自己的this值。比如,典型的如下:

(1)构造函数的this指向了一个新的对象;

(2)严格模式下的函数的this值为undefined;

(3)如果函数是作为对象的方法被调用,则其this指向了那个调用它的对象。

在箭头函数中呢?

我们先看一个实例:

function s(){
    this.a=5;
    o=()=>{this.b=6;};
    o();
}
s();
window.a;//5
window.b;//6

这里箭头函数中的this还是指向了window,不过它所在的执行环境即s函数中的this也指向window。

如果我们改一下代码:

function s(){
    this.a=5;
    o=()=>{this.b=6;};
    o();
}
var s1=new s();
s1;//{a: 5, b: 6}
window.a;//undefined
window.b;//undefined

我们看到箭头函数的执行环境s函数中this指向新创建的对象,箭头函数中的this便也指向新创建的对象。

由此,我们可以得出猜测:箭头函数的this指向和它执行环境中的this保持一致。

如果我们查阅资料就会发现:

箭头函数会捕获其所在上下文的this作为自己的this,也就是说,箭头函数内部与其外部的this是保持一致的。