普通函数和箭头函数的this指向区别?-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53969648/article/details/122578394

本文详细解析了ES5普通函数与ES6箭头函数中this关键字的行为差异。ES5中this取决于函数调用方式，而在ES6箭头函数中this由定义时的上下文决定。

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

ES5普通函数的this执行是: this指向运行时的函数调用者!

ES6的新特性箭头函数的this指向是:

"箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This指向</title>
</head>
<body>
    <script>
        // 普通函数
        let general = {
            name: "天天向上",
            fun: function () {
                console.log("我是general下的fun" , this);
            },
            fun2: function (){
                let obj = function () {
                    console.log("我是general下的fun2",this);
                }
                obj();
            }      
        }
        // 调用普通函数
        general.fun();
        general.fun2();
        
        // 箭头函数
        let arrows = {
            name: "好好学习",
            arr: () => {
                console.log("我是arraws下的arr" , this);
            },
            arr2: function () {
                let obj = () => {
                    console.log("我是arrows下的arr2里的obj",this);
                }
                obj();
            }
            
        }
        // 调用箭头函数
        arrows.arr()
        arrows.arr2();
    </script>
</body>
</html>

运行结果: