JavaScript的回调失去“这个”(Javascript callbacks losing &#

我有，我失去了“这个”这个“对象”内部发行人。 下面的一段JavaScript代码的输出给了我“一些-ID”，然后选择“不确定”。 当我使用“这个”一个回调函数里面，适用范围超出了对象的，它不能用“这个”了。 我怎样才能得到回调使用“这个”，或者至少可以访问对象？

由于我会让多个对象，我将无法创建一个“静态”像存储。 请帮助这个JavaScript的n00b ;-)

这里是我的测试代码，你可以用它来复制我的问题。 我想有是CheckBox.doSomething()返回的值this.id应符合some-id为这个测试案例。

function CheckBox(input_id) {
    this.id = input_id;
    this.doSomething();
    $('#some-element').click(this.doSomething);
}

Checkbox.prototype.doSomething = function() {
    alert(this.input_id);
}

var some_box = new CheckBox('some-id');
some_box.doSomething();
$('#some-element').click();

编辑：我甚至不能得到这个工作，我希望它：

function CheckBox2(input_id) {
    this.id = input_id;
    alert(this.id);
}

CheckBox2.prototype.doSomething = function() {
    alert(this.input_id);
}
var some_box = new CheckBox2('some-id');
some_box.doSomething();

Answer 1:

function CheckBox(input_id) {
    this.id = input_id;
    this.doSomething = $.proxy( this.doSomething, this );
    $('#some-element').click(this.doSomething);
}

在“JavaScript的等价物”的，这是Function#bind ，但不可用在每一个浏览器，因为它似乎你正在使用jQuery我使用jQuery相当于$.proxy

Answer 2:

你的问题是这一行： $('#some-element').click(this.doSomething);

为什么这是一个问题

JavaScript方法不知道应该分配给对象的任何this ，当调用该方法明确地（用它设置myFunction.call(obj)或隐式（使用调用时obj.myFunction()

例如：

var x = {
    logThis: function () {
        console.log(this);
    }
};

x.logThis(); // logs x
x.logThis.call(y); // logs y

var func = x.logThis;
func(); // logs window: the fallback for when no value is given for `this`

在你的情况，你传递this.doSomething jQuery的，然后将其明确地与被点击的价值元素调用它this 。 发生了什么事是（一个稍微复杂一些的版本）这样的：

var callback = this.doSomething;
callback.call(anElement, anEvent);

解决方案

你需要确保doSomething调用与权值this 。 你可以通过在另一个函数进行包装：

var cb = this;
$('#some-element').click(function() {
    return cb.doSomething();
});

jQuery提供一个proxy功能，可以让你做到这一点更简单：

$('#some-element').click(jQuery.proxy(this.doSomething, this));

Answer 3:

别人已经说明了问题，以及如何使用jQuery解决这个问题的原因。 剩下的就是如何用标准的JavaScript修复它。 代替 ...

$('#some-element').click(this.doSomething);

... 你写：

document.getElementById('some-element').addEventListener('click', this.doSomething.bind(this));

这改变的背景下this里面doSomething 。 你也可以做到这一点与匿名函数 - 而不是...

$('#some-element').click(function(event) {
    console.log(this);
});

... 你写：

document.getElementById('#some-element').addEventListener('click', (function(event) {
    console.log(this);
}).bind(this));

这一直是非常有用的，我在项目中有很多回调的，例如在Node.js的（你不必在意过时的浏览器）。

编辑： getElementById()和addEventListener()来代替$(...).click(...)

文章来源: Javascript callbacks losing 'this'