当前位置：网站首页>ES6 arrow function this points to

ES6 arrow function this points to

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

There is no... Inside the arrow function this Point to , Inside the arrow function this The direction can only be determined by looking up the scope chain , Once the arrow function is used, there is currently no scope chain .

Writing like this will report an error ：

<body>
    <script>
        let Page = {
            id: 123,
            init: function() {
                document.addEventListener('click', function(e) {
                    this.todo(e)
                })
            },
            todo: function(type) {
                console.log(` Event type :${type}, At present id:${this.id}`);
            }
        }
        Page.init()
    </script>
</body>

If you change it to the following ：

<body>
    <script>
        let Page = {
            id: 123,
            init: function() {
                document.addEventListener('click', (e) => {
                    this.todo(e)
                })
            },
            todo: function(type) {
                console.log(` Event type :${type}, At present id:${this.id}`);
            }
        }
        Page.init()
    </script>
</body>

Let's analyze the above code , Because in the arrow function, there is no this Point to the , So in click There is no callback function in the event this, It will go to the next floor, that is init Look for ,init It's a function , Its object is Page, So the final scope is Page, So the final output is ：

Let's take a look at the following ：

<body>
    <script>
        let Page = {
            id: 123,
            init: () => {
                document.addEventListener('click', (e) => {
                    this.todo(e)
                })
            },
            todo: function(type) {
                console.log(` Event type :${type}, At present id:${this.id}`);
            }
        }
        Page.init()
    </script>
</body>

Because the arrow function doesn't have this Point to the , So in click There is no callback function in the event this, It will go to the next floor init Go inside ,init It is also an arrow function without this Point to again Page, Then find the definition Page The scope chain of an object is window. So the result will be wrong .

In a word, it is ：

In a word, it is ：“ The object pointed to by the scope of this function ”

原网站

版权声明
本文为[setTimeout()]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/210/202207291042406706.html

当前位置：网站首页>ES6 arrow function this points to

ES6 arrow function this points to

边栏推荐

猜你喜欢

随机推荐