javascript - knockoutjs中方法的区别

Question

getFullName1 和 getFullName2 有区别吗？

View 模型:

var viewModel = {
    firstName: ko.observable("Vasya"),
    lastName: ko.observable("Petrov"),
    getFullName1: function() {
        return this.firstName() + " " + this.lastName();
    }
};

viewModel.getFullName2 = ko.dependentObservable(function() {
    return this.firstName() + " " + this.lastName();
}, viewModel);

// Activates knockout.js
ko.applyBindings(viewModel);

模板

<p>Full name 1: <span data-bind="text: getFullName1()">todo</span></p>
<p>Full name 2: <span data-bind="text: getFullName2()">todo</span></p>
<p>First name: <input data-bind="value: firstName"></p>

Answer 1

一些事情:

• getFullName1 未绑定(bind)到您的 viewModel，因此根据调用它的位置，this 的值可能不是您的 viewModel。这在 Knockout 中尤为重要，您的代码将被间接调用并传递对函数的引用。这可能不会影响您，但在处理集合/模板时尤其会发挥作用。

• 绑定(bind)是使用 dependentObservables 实现的，因此在您使用它的方式中，当 firstName 或 lastName 发生变化时，它们都会更新它们的跨度。

• 因为 getFullName2 是一个 dependentObservable，它会在其依赖项之一发生变化时自行更新。它是否绑定(bind)到任何东西都没有关系。它还为您提供其他功能，例如针对它创建手动订阅。

• 您也可以只对 dependentObservable 说 test: getFullName2，因为它会被展开。

• 但最重要的原因是 dependentObservables 仅在它们的依赖关系发生变化并且它们的实际值缓存在其中时才会更新。因此，如果我调用 getFullName1 100 次，它将完成所有 100 次工作。如果我调用 getFullName2 100 次，它只会返回它在创建时或依赖项上次更改时计算的最新值。