Question

我试图通过jquery范围内的this引用来调用函数：

var Person = function(){

    this.hello = function(){
        console.log("hello!");
    }

    this.jump = function(){
        $('.jump').on('click', function(){
            this.hello();
        });
    }

}

然后我这样做：

var p = new Person();

当我点击.jump元素时，控制台会输出描述hello is not a function的错误。我不确定这里发生了什么，我在假设this试图在jquery中调用一个函数（不确定）。

所以，谷歌搜索了一下我发现Jquery.proxy()功能可能对我的情况有所帮助，但每当我试图理解它时，我的脑袋想要探索。

Answer 1

试试这个，

var self = this;


 this.jump = function(){
        $('.jump').on('click', function(){
            self.hello();
        });
    }

Answer 2

像这样使用$.proxy()：

var Person = function(){

    this.hello = function(){
        console.log("hello!");
    }

    this.jump = function(){
        $('.jump').on(
            'click',
            $.proxy(
                function() {
                    this.hello();
                },
                this
            )
        );
    }
}

将this作为第二个参数传递给$.proxy()，将该上下文作为this的值发送到第一个参数中定义的函数内。

Answer 3

当你提到＆＃34;这个＆＃34;在onclick中，默认情况下，这是指在event.target

的值中找到的DOM元素

$('.jump').on('click', function(event) {
     this.hello() /// <<-- this == event.target =~ $('.jump')
}

所以，幸运的是，您可以使用closure

var self = this;
this.jump = function(){
    $('.jump').on('click', function(){
        self.hello();
    });
}

在jquery上下文中调用this.function

3 个答案: