Question

我是JavaScript类的新手。我有一个JavaScript类。我想要的是console.log将输出类对象的结果而不是此元素（mousedown的元素）。我该怎么写呢？

function Transformer (output) {
    this.output = output;
    $(output+' .object').mousedown(function(e){
        console.log(this);
    });
}

var test = new Transformer('.console');

Answer 1

如果要打印类对象本身，则需要在另一个变量中保存对上下文的引用，因为匿名函数中的this指向匿名函数本身的上下文：

function Transformer (output) {
    var self = this;
    this.output = output;

    $(output+' .object').mousedown(function(e){
        console.log(self); // will print the object itself
    });
}

或者，您可以使用arrow function完全跳过保存参考：

function Transformer (output) {
    this.output = output;

    $(output+' .object').mousedown(e => {
        console.log(this); // will print the object itself
    });
}

Answer 2

这已被问过很多（例如JavaScript Callback Scope），但我想我应该提一下，这也可以使用ECMAScript 6中的箭头函数解决，如下所示：

function Transformer (output) {
   this.output = output;
   $(output+' .object').mousedown((e) => {
       console.log(this);
   });
}

var test = new Transformer('.console');

但是，使用箭头功能意味着您正在丢失事件目标上下文（您可以使用e.currentTarget

恢复该事件目标上下文

我之所以提到这一点，是因为很可能所有来源都比ES 6旧，并且可能不会提到这一点。

检查ES6 compatibility以查找当前支持箭头功能的平台。

类中的JavaScript事件

2 个答案: