JavaScript - 调用类函数 onclick [重复]答案

【问题标题】：JavaScript - Call class function onclick [duplicate]JavaScript - 调用类函数 onclick [重复]
【发布时间】：2015-08-07 13:27:54
【问题描述】：

我想在触发 onclick 事件时从类中调用“成员”函数。 onclick 事件本身应该绑定在类中。这就是我所拥有的：

var MyClass = function()
{
    this.value = 'hello';

    this.update = function()
    {
        console.log(this.value);
        // Do some things with this.value
    };

    $('#button').click(this.update);
};

更新函数中浏览器抱怨 this.value 未定义。

【问题讨论】：

我确定this 指的是您在该范围内附加到事件侦听器的元素？为什么不试试MyClass.update？
onclick 事件将在 clicked 事件作为上下文的情况下执行，因此您必须再次将处理程序绑定到您的类。

标签： javascript jquery class jquery-events

【解决方案1】：

在处理函数中，this 指的是您单击的按钮。为了规避它，您可以将 this 引用存储到局部变量，然后使用它。在这种情况下，最常用的变量名是 self 或 that。

var MyClass = function() {
    var self = this;
    self.value = 'hello';
    self.update = function() {
        console.log(self.value);
        // Do some things with self.value
    };
    $('#button').click(self.update);
};

或者正如其他人提到的，你可以明确地使用MyClass.update。

【讨论】：

【解决方案2】：

this 不是指MyClass。

var MyClass = function () {
    var _this = this;
    this.value = 'hello';
    this.update = function () {
        alert(_this.value);
        // Do some things with this.value
    }
    this.click = function () {
        $('#button').click(_this.update);
    }

    this.click();
};

var myClassOBJ = new MyClass();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">Click Me</div>

【讨论】：