Question

如何在JS / jQuery中的对象常量内定义的事件回调中引用对象本身？

我研究了各种答案和文章，例如以下问题：How to access the correct `this` inside a callback?，但发现自己更加困惑。

在我们需要访问this时应该引用被单击的元素是有道理的，但是我该如何引用包含绑定函数本身的对象呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This</title>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</head>
<body>

    <button id="test">Click Me</button>
    <script>

        $( document ).ready( function() {

            console.log(MyObj.introspect());
            MyObj.bindEvents();

        } );

        MyObj = {
            myProperty : 'a property',

            bindEvents : function(){
                $('#test').on('click', MyObj.introspect)
            },

            introspect : function(){
                console.log(this);
            }
        }
    </script>
</body>
</html>

Answer 1

在您的情况下，您将使用MyObj，就像在bindEvents中一样，因为它是一个单例：

MyObj = {
    myProperty : 'a property',

    bindEvents : function(){
        $('#test').on('click', MyObj.introspect)
    },

    introspect : function(){
        console.log(MyObj);
        // ---------^^^^^
    }
}

侧面说明：您的代码已沦为我所谓的The Horror of Implicit Globals的牺牲品。请确保声明变量（使用var或ES2015的let或const）。在您的情况下，可以将MyObj完全设为私有，因为只需将其移到ready回调中并声明即可：

$( document ).ready( function() {
    var MyObj = {                                    // Note the `var`
        myProperty : 'a property',

        bindEvents : function(){
            $('#test').on('click', MyObj.introspect)
        },

        introspect : function(){
            console.log(MyObj);
        }
    };                                               // Also added missing ; here

    console.log(MyObj.introspect());
    MyObj.bindEvents();
});

JS Object Literal中的“ This”-事件回调中的不同含义

1 个答案: