Question

我还在这个小提琴中找到了以下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>

// Simon A

Answer 2

你可以做到

$(document).ready(function() {
    var that = this;
    that.myfunc = function() {
        console.log('Hello world');
    }
    that.myfunc();
    $('#element_id').select('.myclass').bind('click', function() {
        that.myfunc();
    });
});

通过这种方式，您可以将this变量缓存到您可以在事件处理程序中重用的内容，其中this指向当前元素

Answer 3

您可能会对this.myfunc电话的处理方式感到有些困惑。

在该上下文中this指的是document，这意味着您在全局定义该函数，并且可以随时通过document.myfunc();

引用它

如果您只想暂时将函数放入变量中，则以下代码应该有所帮助：

 $(document).ready(function() {
        this.myfunc = function() {
            alert('Hello world');
        };
     var otherfunc = function() {
            alert('Hi world');
        };
     $('.cv1').click(document.myfunc);
     $('.cv2').click(otherfunc);
 });

JSFiddle：http://jsfiddle.net/LKmuX/

这展示了您在将函数附加到文档方面所做的工作，以及将其放在变量中。

Answer 4

缓存上下文的替代方法，如果需要在绑定函数中使用外部上下文，则使用proxy()方法（docs here）来更改内部函数的范围，如这个：

$('#element_id').select('.myclass').bind('click', $.proxy(function() {
    this.myfunc();
}, this));

通过这种方式，我强制实际的this（当我使用bind方法时的上下文）在绑定函数内部是相同的（通常有自己的上下文）

http://jsfiddle.net/k4u4c/2/

仅供参考 - 在Dojo库中可以找到相同的方法（在Dojo中也是如此）很大程度上使用了），它被称为hitch

Answer 5

最常见的方法是在其他变量中缓存 this，稍后在处理程序中引用该变量，就像使用this一样。 http://jsfiddle.net/k4u4c/3/

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

在jquery中使用事件处理程序中的“this”

5 个答案: