JS和OOP:滥用`that = this`模式

Question

我对JS世界比较陌生.

我习惯用QT编写UI(构建UI的好工具!).使用QT我正在为每个元素做一个类:如果我有一个带有一些元素的表,我有一个每个元素的类和一个表的类(也许也用于行).每个类都包含数据和操作其"DOM"的方法.

现在在html中我正在使用一些在div上包含空骨架的ejs文件,我正在编写一个类来通过jquery来操作它.

例如:

userslist.ejs:

<script type="text/javascript">

function UsersList(path) {
    this.path = path;

    $('#userList > tbody').empty();
    this.loadAjax();
}

UsersList.prototype.loadAjax = function() {
    var that = this;
    $.getJSON(this.path, function(users) {
        that.fillUsers(users);
    });
};

UsersList.prototype.fillUsers = function(users) {
    var that = this;
    users.forEach(function(user){
        var tr = that.buildTr(user);
        $('#userList > tbody:last').append(tr);    
    });
};

UsersList.prototype.buildTr = function(user) {
    ...
};

</script>


<h1>Users list</h1>
<table id="userList">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Control</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

使用JavaScript编码的回调方式(以及一般的jquery dom操作)我很容易丢失this关键字来引用类方法和类属性(即使我在嵌套回调中获得了一些控制权).而且我发现自己真的滥用了这个var that = this;东西......我几乎在课堂上的每个方法中都有它.

我怎么能避免这个？我喜欢OOP,但我很想探索这个新的时尚js,具有一些功能特性和asynch无处不在.

在JS中处理这个问题的正确方法是什么？var that = this;每次使用回调时,如何避免在每种方法中写入？

Answer 1

通常，当您在 javascript（事件、ajax）中使用异步编程时，上下文就是事件的上下文，因此您会丢失对象的上下文。

该var that = this模式，您更经常将其视为var self = this或var $this = this允许在方法中添加闭包以重新建立上下文。

这是另一种方法，当调用对象方法时，它将强制上下文为 this ：

UsersList.prototype.loadAjax = function() {
    var that = this;
    $.getJSON(this.path, this.fillUsers.bind(this));
};