JS中"this"的问题

Question

考虑以下代码：

    var table = function () {
        return {
            _init: function (tableId) {
                this.tableId = tableId;
                this.table = $("#" + tableId);
            },
            removeStripes: function() {
                this.table.find(".alt").removeClass("alt");
            },
            addStripes: function () {
                this.table.find("tbody tr:even").addClass("alt");
            },
            resetStripes: function() {
                this.removeStripes();
                this.addStripes();
            },
            sort: function (options) {
                this.table.tablesorter(options);
                this.table.bind("sortEnd", this.resetStripes);
            },
        }
    }
var newTable = new table();
newTable._init("tableId");
var options = {};
newTable.sort(options);

浏览器在最后一行显示this.resetStepes调用的this.removeStepes不是函数。我想this有一些错误，但我不知道它在哪里。有人知道吗？

Answer 1

尝试在声明排序函数后删除coma(，(。这可能不会解决你的问题，但它会在ie<7.

Answer 2

当您使用匿名函数声明方法时，this不再在table函数范围内。

您应该使用：

 removeStripes: function() {
   // ...
 }.bind(this)

关于你所有的方法。

Answer 3

您想要的是构造函数方法/模式。现在，当您调用一个实例化对象方法(例如newTable.removeStripes(((时，上下文(this(将设置为newTable。不过，我相信您总是可以使用newTable.removeStripes.call(someOtherTableOrObject(来更改上下文，这在很多情况下都很有用。

function Table(tableId) {
    this.tableId = tableId;
    this.table = $("#" + tableId);
    this.removeStripes = function() {
        this.table.find(".alt").removeClass("alt");
    };
    this.addStripes = function () {
        this.table.find("tbody tr:even").addClass("alt");
    };
    this.resetStripes = function() {
        this.removeStripes();
        this.addStripes();
    };
    this.sort = function (options) {
        this.table.tablesorter(options);
        this.table.bind("sortEnd", this.resetStripes);
    };
}
var newTable = new Table("tableId");
var options = {};
newTable.sort(options);

Answer 4

var table = function (tableId) {
        this.tableId = tableId;
        this.table = $("#" + tableId);
        this.removeStripes= function() {
            this.table.find(".alt").removeClass("alt");
        };
        this.addStripes= function () {
            this.table.find("tbody tr:even").addClass("alt");
        };
        this.resetStripes= function() {
            this.removeStripes();
            this.addStripes();
        };
        this.sort= function (options) {
            this.table.tablesorter(options);
            this.table.bind("sortEnd", this.resetStripes);
        };
}

"this"关键字在Javascript中的用法与其他语言中的用法大不相同。上面的版本应该可以工作(我用jsc测试了它，而不是用jQuery在浏览器中测试(。现在，该函数是一个合适的构造函数，使解释器将"this"设置为要创建的对象。

Answer 5

试试这个：

var table = function () {
        var that = this;
        return {
            _init: function (tableId) {
                that.tableId = tableId;
                that.table = $("#" + tableId);
            },
            removeStripes: function() {
                that.table.find(".alt").removeClass("alt");
            },
            addStripes: function () {
                that.table.find("tbody tr:even").addClass("alt");
            },
            resetStripes: function() {
                that.removeStripes();
                that.addStripes();
            },
            sort: function (options) {
                that.table.tablesorter(options);
                that.table.bind("sortEnd", that.resetStripes);
            },
        }
    }
var newTable = new table();
newTable._init("tableId");
var options = {};
newTable.sort(options);

在JavaScript中，将this保存到另一个变量中是一种常见的模式，这样您就可以在更深的嵌套函数中引用它。由于javascript this总是引用全局对象或通过.call或.apply传递给函数的this对象，因此有时使用起来相当不可靠。。