javascript - 使用 var self = 这是在类和事件之间同步的好方法吗？

Question

让我们看一下这个简单的代码示例(为简单起见，它是用 angularjs 编写的，但这种情况在 JavaScript 中经常发生):

angular.module('app',[]).
directive('myDir', function(){
    this.state = {a:1, b:2};

    return {
        link: function(scope, elem, attrs){
            elem.on('click', function(){
                // "this" is not the class but the element
                this.state.a++;       
                this.state.b++;
                console.log(this.state);
            });
        }
    }
});

当要调用 onclick 回调时，“this”将不是指令函数，而是元素本身。

所以我们都知道这里的技巧，我们创建一个闭包并使用 var self = this 来完成工作。

angular.module('app',[]).
directive('myDir', function(){
    // create a closure for the rescue
    var self = this;
    this.state = {a:1, b:2};
    return {
        link: function(scope, elem, attrs){
            elem.on('click', function(){
                self.state.a++;       
                self.state.b++;
                console.log(self.state);
            });
        }
    }
});

好的 - 这行得通而且我已经这样做了很多次，但我问自己这是否是做这样的事情的最佳方式？
在我看来，这总是一个糟糕的设计变通办法。
有没有更好的方法来同步类和用户事件？

Answer 1

我会判断你的具体例子不好，但也许不是因为你在想的原因。如果您在 http://plnkr.co/edit/K66o8tmRtnnfk8NZ8YPf?p=preview 看到修改后的版本

app.directive('myDir', function(){
    // create a closure for the rescue
    var self = this;
    this.state = {a:1, b:2};
    return {
        link: function(scope, elem, attrs){
            elem.on('click', function(){
                self.state.a++;       
                self.state.b++;
                // Using global scope (seen as a bad thing)
                console.log(self === window);
            });
        }
    }
});

然后您定义的 self 实际上等于 window，因此您实际上是在将状态保存到全局范围。这是因为定义指令的函数不是 new 语句的目标，因此 this 有其默认值，即 window.

如果函数是new 语句的目标，例如controller 或service，则设置self =这个 没问题。但是，在 directive 或 factory 中，this 不会更改其默认值 window。在这些情况下，我只会定义一个局部变量

var state = {a:1, b:2};

并从闭包中访问它。

另一种方法是在每个事件处理程序上使用类似bind 的东西，以更改其中的this 所引用的内容。但是，有时您可能需要事件处理程序中的默认绑定(bind)，因此有时需要使用 bind 有时不需要，我怀疑这可能会导致花费更多的调试时间，因为您没有编写这些内容的一致方法。