js 中 this 的指向问题-优快云博客

本文详细解析了JavaScript中this关键字的指向问题，通过实例演示了在不同情况下this的指向变化，并提供了两种解决this指向问题的方法。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- this 如果没有被调用的话 是没有指向谁这一说的 -->
    <button id='btn'>点我</button>
    <!-- 1、this 指的是调用当前方法（函数）的那个对象，也就是说函数在谁那被调用，this就指的是谁。 -->
    <script>
        

        var oBtn = document.getElementById('btn');

        // oBtn.onclick = function(){
        //    console.log(this); // oBtn
        // }

        // 很容易看出，函数是在按钮对象被点击的时候调用，所以 this 指的是 obtn
        

     // 2 当函数里面嵌套函数的时候，嵌套的那个函数里面的this指的是window, 不要过分深究这个原因，因为这是JS的一个特性。
        //   oBtn.onclick = function () {
        //         console.log(this); // 这里还是 oBtn

        //         fn();
        //     }

        //     function fn(){
        //         console.log(this) // window 
        //     }
 
            // 3 、对于上述情况，当我们需要 fn 里面的 this 指向按钮的时候怎么办呢，这个时候有两种方法。
            //     1) 将this作为参数传函数去
            //     2) 将this保存起来赋给另一个变量
            //     来看两个例子： 

            //---------------------------------------------------------

            // 方法一
            // oBtn.onclick = function () {
            //         console.log(this); // oBtn

            //         fn(this);
            //     }

            //     function fn(obj) {
            //         console.log(obj) // oBtn
            //     }
            //---------------------------------------------------------

            // 方法二
             var _that =null;
             oBtn.onclick = function () {
                    console.log(this); // oBtn

                    _that = this;

                    fn();

                }

                function fn() {
                    console.log(_that) // oBtn
                }


    </script>



</body>
</html>
复制代码