Question

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

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

Answer 1

您还可以使用在ES6中新定义的箭头功能。

＆＃34;箭头函数表达式的语法短于函数表达式并不绑定它自己的this，arguments，super或 new.target。箭头功能始终是匿名的。这些功能表达式最适合非方法函数，但它们不能用作构造函数。＆＃34;

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真的是值得的。

Answer 2

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

$('#sl').on('mouseup', function(){
    canvas=document.getElementById("a");
    ctx=canvas.getContext("2d");
    dataURL = canvas.toDataURL();
    $('.s').find('img').attr('src', dataURL);
    $('#a').hide();
});

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

Answer 3

您传递给.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()
    });
}

Answer 4

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

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

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

没有'this'的jQuery onclick

4 个答案: