方法中this指向的问题

Posted zxh-null

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了方法中this指向的问题相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <button class="btn">按钮</button>

    <script src="../js/jquery.js"></script>
    <script>
        var obj={
            show:function(){
                console.log(this,1);
            },
            hide:function(){
                console.log(this,2);
            }
        }

        //这次只是绑定了事件,真正调用时是在hover的时候
        //因此调用这个方法的实际是hover的元素
        $(".btn").hover(obj.show,obj.hide);//this指向调用obj.show这个方法的元素

    </script>
</body>
</html>

这里只是绑定了事件,函数真正执行是在元素被hover的时候,因此this指向调用该方法的元素

技术图片

 

 

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <button class="btn">按钮</button>

    <script src="../js/jquery.js"></script>
    <script>
        var obj={
            show:function(){
                console.log(this,1);
            },
            hide:function(){
                console.log(this,2);
            }
        }

        $(".btn").hover(function(){
            obj.show();//方法是obj直接调用的,因此this指向obj
        },function(){
            obj.hide();
        });
    </script>
</body>
</html>
技术图片

这里的方法是在匿名函数中直接调用的(加了()小括号表示调用)

因此this指向调用该方法的obj对象

技术图片

 

以上是关于方法中this指向的问题的主要内容,如果未能解决你的问题,请参考以下文章

箭头函数与this指向问题

箭头函数与this指向问题

Javasript中this指向问题和改变this指向的方法

this 使用注意点

this的指向的一些问题

setTimeout中this指向的问题