javascript - 对象的范围应该是不可见的，但它的出现是如何发生的？

Question

这是将 View 模型显示到表中部分的 HTML 代码，

Accounts 是帐户数组:每个帐户都有:

1 - ID2- 姓名3-平衡4- 存款

还有一个名为Count的计算函数，用于计算帐户数组中的帐户数量

帐户和计数位于同一范围内，即 ViewModel 对象

 <table class="accounts-table">
    <thead>
        <tr>
            <td>Index   </td>
            <td>Id      </td>
            <td>Accounts</td>
            <td>Balance </td>
            <td>Deposits</td>
            <td>Counts</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: {data:Accounts, as: 'Account'}">
        <tr>
            <td class="accounts-table" data-bind="text:($index() + 1) + '/' + Count()" ></td>
            <td class="accounts-table" data-bind="text:Id"></td>
            <td class="accounts-table" data-bind="text:Name"></td>
            <td class="accounts-table" data-bind="text:Balance"></td>
            <td class="accounts-table">
                <ul data-bind="foreach: {data: Deposits, as: 'Amount'}">
                    <li data-bind="text:Account.Name + ' Deposits ' + Amount"></li>
                </ul>
            </td>
        </tr>
    </tbody>

这是 Javascript 部分:

 <script>
    function Account(id, name, balance, deposits) {
        this.Id = id;
        this.Name = name;
        this.Balance = balance;
        this.Deposits = deposits;
    }

    var myAccountViewModel = function () {
        this.Accounts = ko.observableArray([
            new Account(1, "A1", 1000, [100, 200, 300]),
            new Account(2, "A2", 2000, [400, 200, 900]),
            new Account(3, "A3", 3000, [600, 200, 800]),
            new Account(4, "A4", 4000, [700, 450, 300]),

        ]);
        this.Count = ko.computed(function () {
            return this.Accounts().length;
        },this);
    }

    ko.applyBindings(myAccountViewModel);
</script>

这一行:

 <td class="accounts-table" data-bind="text:($index() + 1) + '/' + Count()" ></td>

当我调用 Count 函数时，它是如何发生的？计数函数如何在帐户范围内工作？!

Answer 1

应用绑定(bind)时，您不会实例化新 View 模型。

这意味着 myAccountViewModel 在 window 上下文中运行，将 Count 属性添加到 window。

function SomeConstructor() {
  console.log("this is window", this === window);
  this.someProp = "x";
};

// Call without `new`, and `this` refers to `window`
SomeConstructor();

// `someProp` is now in `window`:
console.log("window.someProp", window.someProp);

// Call it with `new` and everything's fine!
new SomeConstructor();

因为 knockout 在幕后使用 with，最终，数据绑定(bind)将访问 window 来解析任何未定义的属性。

window.someProp = "x";

var someBindingContext = {
  anotherProp: "y"
};

with (someBindingContext) {
  console.log(anotherProp); // Logs y
  console.log(someProp); // Logs x, even though `someProp` is in `window`
}

将应用绑定(bind)行更改为 ko.applyBindings(new myAccountViewModel()) 以“修复”它。现在，您的内部绑定(bind)中需要 $parent.Count()。

function Account(id, name, balance, deposits) {
  this.Id = id;
  this.Name = name;
  this.Balance = balance;
  this.Deposits = deposits;
}

var myAccountViewModel = function() {
  this.Accounts = ko.observableArray([
    new Account(1, "A1", 1000, [100, 200, 300]),
    new Account(2, "A2", 2000, [400, 200, 900]),
    new Account(3, "A3", 3000, [600, 200, 800]),
    new Account(4, "A4", 4000, [700, 450, 300]),

  ]);
  this.Count = ko.computed(function() {
    return this.Accounts().length;
  }, this);
}

ko.applyBindings(new myAccountViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="accounts-table">
  <thead>
    <tr>
      <td>Index </td>
      <td>Id </td>
      <td>Accounts</td>
      <td>Balance </td>
      <td>Deposits</td>
      <td>Counts</td>
    </tr>
  </thead>
  <tbody data-bind="foreach: {data:Accounts, as: 'Account'}">
    <tr>
      <td class="accounts-table" data-bind="text:($index() + 1) + '/' + $parent.Count()"></td>
      <td class="accounts-table" data-bind="text:Id"></td>
      <td class="accounts-table" data-bind="text:Name"></td>
      <td class="accounts-table" data-bind="text:Balance"></td>
      <td class="accounts-table">
        <ul data-bind="foreach: {data: Deposits, as: 'Amount'}">
          <li data-bind="text:Account.Name + ' Deposits ' + Amount"></li>
        </ul>
      </td>
    </tr>
  </tbody>