Question

var TwitterListModel = function (lists, selectedList) {
    // [...]

    this.addUser = function () {
        if (this.userNameToAdd() && this.userNameToAddIsValid()) {
            this.editingList.userNames.push(this.userNameToAdd());
            this.userNameToAdd("");
        }
    };

    this.removeUser = function (userName) {
        this.editingList.userNames.remove(userName)
    }.bind(this);

    // [...]
}

我在Knockout JS示例的this page中找到了这段代码。它们在对象内声明。我想理解为什么第一个函数不使用.bind(this)而第二个函数不使用。

何时以及为何需要使用.bind(this)？看起来如果我使用它没有任何区别：this的含义总是被引用到声明方法的对象（而不是找到它的匿名函数）。我是对的吗？

这两种方法都访问this.editingList，并且在两种情况下它们都指的是相同的变量。

Answer 1

您可以使用他们为此示例提供的fiddle ...

如果您尝试删除.bind(this)，则会看到this（在此方法中添加console.log(this)），然后引用用户名。这是因为removeUser函数绑定在用户名（<ul data-bind='foreach: userNames'>）上的循环中的按钮上。

对于另一个绑定，它附加到表单，然后与整个模型一起使用。

Answer 2

似乎removeUser旨在用于回调，而回调this中不会引用TwitterListModel，因此他们明确地将TwitterListModel指定为this到函数

Answer 3

removeUser绑定到数组中行的上下文。

$root指出了父级，但是当调用单击处理程序时，this上下文将指向单击的项目。这是由KO团队设计的。

你也可以像这样解决它

<button data-bind='click: $root.removeUser.bind($parent)'>Remove</button>

这也适用于原型函数声明

为什么在这个例子中使用.bind（）？

3 个答案: