当前位置：网站首页>ES6-箭头函数this指向

ES6-箭头函数this指向

2022-07-29 10:43:00 【setTimeout()】

箭头函数内部没有this指向，箭头函数内部this指向只能通过查找作用域链来决定，一旦使用箭头函数当前就不存在作用域链。

下面这样写会报错：

<body>
    <script>
        let Page = {
            id: 123,
            init: function() {
                document.addEventListener('click', function(e) {
                    this.todo(e)
                })
            },
            todo: function(type) {
                console.log(`事件类型:${type},当前id:${this.id}`);
            }
        }
        Page.init()
    </script>
</body>

如果改成下面这样：

<body>
    <script>
        let Page = {
            id: 123,
            init: function() {
                document.addEventListener('click', (e) => {
                    this.todo(e)
                })
            },
            todo: function(type) {
                console.log(`事件类型:${type},当前id:${this.id}`);
            }
        }
        Page.init()
    </script>
</body>

我们来分析一下上面这个代码，因为在箭头函数里面是没有this指向的，所以在click事件里面的回调函数就没有this，它就会去上一层也就是init去找，init是一个函数，它所在的对象是Page，所以最终作用域是Page，所以最终的输出结果是：

再来看下面这个：

<body>
    <script>
        let Page = {
            id: 123,
            init: () => {
                document.addEventListener('click', (e) => {
                    this.todo(e)
                })
            },
            todo: function(type) {
                console.log(`事件类型:${type},当前id:${this.id}`);
            }
        }
        Page.init()
    </script>
</body>

因为箭头函数是没有this指向的，所以在click事件里面的回调函数就没有this，它会去上一层init里面去找，init也是一个箭头函数也没有this指向又到Page，然后找定义Page对象的作用域链就是window。所以结果会报错。

一句话概括就是：

一句话概括就是：“该函数所在作用域指向的对象”

原网站

版权声明
本文为[setTimeout()]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_43781887/article/details/126042968