没有'this'的jQuery onclick [重复]答案

【问题标题】：jQuery onclick without 'this' [duplicate]没有'this'的jQuery onclick [重复]
【发布时间】：2018-01-19 04:54:08
【问题描述】：

// Block class
function Block(id) {
    this.element = $('<td>');
    $(this.element).click( function() {
        console.log(this);
    });
}

控制台日志输出被点击的 HTML 元素，这不是我想要的。我想访问与此元素关联的 Block 对象。这怎么可能？

【问题讨论】：

使用箭头功能？ () => {}

标签： javascript jquery html object

【解决方案1】：

你也可以使用 ES6 中新定义的箭头函数。

"箭头函数表达式的语法比函数短表达式并且不绑定它自己的 this、arguments、super 或新目标。箭头函数始终是匿名的。这些功能表达式最适合非方法函数，它们不能用作构造函数。”

function Block(id) {
    this.element = $('<td>');
    $(this.element).click( () => {
        console.log(this); // now this will be what it was outside of the anonymous function passed into .click
    });
}

请注意，并非所有浏览器都实现了此功能。我相信它适用于 chrome 但不适用于 IE（当然）。因此，如果您想使用此功能，我还建议您考虑使用 javascript 转译器（我会推荐 Babel），它会将您的 javascript 转换为与特定浏览器版本兼容。因此，在上述函数上使用 babel 后，javascript 将如下所示

function Block(id) {
    var objectReference = this;
    this.element = $('<td>');
    $(this.element).click( function() {
        console.log(objectReference); 
    });
}

你当然可以像上面那样编写你的函数，而不需要使用 Babel。如果你想确保浏览器的兼容性或者你打算使用更多的 ES6 特性，那么 Babel 真的是值得的。

【讨论】：

【解决方案2】：

发布的替代解决方案是使用bind：

function Block(id) {
    this.element = $('<td>');
    $(this.element).click(console.log.bind(this));
}

这种方法很好，因为它不需要额外的上下文保存变量。

【讨论】：

【解决方案3】：

您可以在点击处理程序外部的变量中捕获this 的值：

function Block(id) {
    var self = this; //capture "this" in outside context

    this.element = $('<td>');
    $(this.element).click(function() {
        console.log(self);
    });
}

【讨论】：

【解决方案4】：

您传递给 .click() 方法的函数存在于元素的上下文中，因此该上下文中的 this 指的是该元素。通过将外部上下文保存在变量中，您可以在新上下文中访问它：

// Block class
function Block(id) {
    var self = this;  // here, this refers to Block()
    this.element = $('<td>');
    $(this.element).click( function() {
        console.log(this); // here this refers to element
        console.log(self); // here self refers to Block()
    });
}

【讨论】：