javascript - 在 jquery 中使用事件处理程序中的 "this"

Question

我在这个 fiddle 中也找到了以下 javascript 代码:http://jsfiddle.net/periklis/k4u4c/

<button id = "element_id" class = "myclass">Click me</button>
<script>
    $(document).ready(function() {
        this.myfunc = function() {
            console.log('Hello world');
        }
        this.myfunc();
        $('#element_id').select('.myclass').bind('click', function() {
            this.myfunc(); //Obviously this doesn't work
        });
    });
</script>​

单击元素时如何调用 this.myfunc()？我不想在全局空间中定义 myfunc()。

一如既往的感谢

Answer 1

创建一个引用该函数的局部变量，这样它就可以从匿名函数访问，并且您最终不会在全局命名空间中使用 myfunc。

<button id = "element_id" class = "myclass">Click me</button> 
<script> 
    $(document).ready(function() { 
        var myfunc = function() { 
            console.log('Hello world'); 
        } 
        myfunc(); 
        $('#element_id').select('.myclass').bind('click', function() { 
            myfunc(); // works!
        }); 
    }); 
</script>​ 

另一方面，如果您分配 var that = this;，那么您的方法 myfunc 将存储在 HTMLDocument 对象中(来自 $( document))，这可能不是您想要的。但如果那是你想要的，那么你就这样做(正如其他人也建议的那样，我可能会补充)。

<button id = "element_id" class = "myclass">Click me</button> 
<script> 
    $(document).ready(function() { 
        // storing reference to $(document) in local variable
        var that = this;
        // adding myfunc on to the document object
        that.myfunc = function() { 
            console.log('Hello world'); 
        } 
        that.myfunc(); 
        $('#element_id').select('.myclass').bind('click', function() { 
            that.myfunc(); // works!
        }); 
    }); 
</script>​ 

//西蒙 A