ES6中箭头函数this指向的问题

最新推荐文章于 2025-06-22 17:32:33 发布

xiaofeng19940727

最新推荐文章于 2025-06-22 17:32:33 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xiaofeng19930727/article/details/79765936

本文探讨了ES6中箭头函数与传统函数在this指向上的不同之处，并通过实例展示了箭头函数如何根据其所在环境确定this的指向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

箭头函数在ES6中用的很常见，刚开始我还觉得这有什么，就是简写了一下而已

后来用习惯之后就觉得是真滴方便

在说之前先简单的概括一下。箭头函数和普通函数的区别如下。

普通函数：根据调用我的人（谁调用我，我的this就指向谁）

箭头函数：根据所在的环境（我再哪个环境中，this就指向谁）

先来看一个简单的例子

document.onclick = function () {
        alert(this); //HTMLDocument
    }

    document.onclick = () => {
        alert(this);    //Window
    }

这两个你运行的时候普通函数this指向的是HTMLDocument，箭头函数指向的是Window。

如果还觉得不明显再看下列代码

document.onclick = function () {
        let arr = [1, 2, 3];
        arr.a = function () {
            alert(this);
        }
        arr.a();    //1,2,3
    }

这里先是使用普通函数，输出了1,2,3。

下面我换成箭头函数

document.onclick = function () {
        let arr = [1, 2, 3];
        arr.a = () => {
            alert(this);
        }
        arr.a();    //HTMLDocument
    }

这里输出就是HTMLDOcument了，因为正如前面所说，箭头函数的this是由它所处的环境决定的