JavaScript:创建对 'this' 的引用(例如 'var _this = this' )与绑定(bind)/调用/应用

Question

在错误的上下文中依赖 this 是一个常见的陷阱。一个人为的例子:

function SomeClass() {
    this.prop = 42;
    document.body.addEventListener('click', function() {
        alert(this.prop); // will be undefined
    });
}
new SomeClass();

解决此问题的一种方法是使用bind(或call 或apply)，例如:

function SomeClass() {
    this.prop = 42;
    document.body.addEventListener('click', (function() {
        alert(this.prop); // works
    }).bind(this));
}
new SomeClass();

另一种选择是通过闭包引用this，通常是_this或self:

function SomeClass() {
    var _this = this;
    this.prop = 42;
    document.body.addEventListener('click', function() {
        alert(_this.prop); // works
    });
}
new SomeClass();

我更喜欢后一种方法，因为我可以声明一次，而不是用 bind() 和嵌套回调(我知道这并不理想，但在野外可以看到)包装大量函数) 变得更简单。但我暗暗怀疑 a) 这种方法存在陷阱，或者 b) 我必须首先执行此操作或 bind 的事实意味着我做错了。有什么想法吗？

Answer 1

您解决“此问题”的方法是可行的:

function SomeClass() {
    this.prop = 42;
    document.body.addEventListener('click', (function() {
        alert(this.prop); // works
    }).bind(this));
}
new SomeClass();

如果你发现你需要这样做，你真的没有做错任何事，但是根据上下文，如果你担心性能，你可能不想创建新函数(这就是 .bind 内部所做的改变 < em>这个)

您可以使用作用域变量代替绑定(bind)，就像您的第二个示例:

function SomeClass() {
    var _this = this;
    this.prop = 42;
    document.body.addEventListener('click', function() {
        alert(_this.prop); // works
    });
}
new SomeClass();

这里唯一剩下的问题是关于代码的可读性，但我的事情是品味问题，这是我针对这种特殊情况所做的事情

function SomeClass() {
    var prop = 42;
    document.body.addEventListener('click', function() {
        alert(prop); // works
    });
}
new SomeClass();

我只是提高了可读性，也许还提高了一点性能，但我并不是说那是做到这一点的“方式”，我想说的是你应该知道如何使用词法范围和闭包并使用(或不使用) ) 在您认为必须的时间/地点(当然，一切都取决于上下文)

编辑:等等!我分配了 this.prop = 42 因为我需要公开该属性在那种情况下，我认为设计 PoV 的最佳实践是通过 getter 公开它:

function SomeClass() {
    var prop = 42;
    document.body.addEventListener('click', function() {
        alert(prop); // works
    });
    this.getProp = function() {
      return prop;
    };

    this.setProp = function(newValue) { // prop is supposed to be modifiable ?
      prop = newValue;
    };
}
new SomeClass();

关于与“this”问题无关的设计的另一个旁注，与类中的全局对象交互感觉不对，我会这样做:

function SomeClass(receiver) {
    var prop = 42;
    receiver.addEventListener('click', function() {
        alert(prop); // works
    });
}
new SomeClass(document.body);