请教Knockout中prototype与subscribe的含义及一段代码的功能

Hey Sarah, let's break this down clearly—first the terms you're confused about, then line-by-line analysis of that code snippet.

• prototype：这是JavaScript里的核心概念之一。如果myspace是一个构造函数（用来创建对象实例的函数），把方法挂在它的prototype上，意味着所有用myspace创建出来的实例都能共享这个方法，不用每个实例都单独复制一份，既省内存又方便统一修改。
• subscribe：这个是观察者模式的典型方法（常见于Knockout.js这类MVVM框架，从appViewModel.dataLoaded的命名来看，大概率是Knockout的可观察对象）。简单说，就是给某个可变化的值注册一个“监听者”——当这个值发生改变时，自动执行你传入的回调函数，相当于“值变了就通知我做某事”。

先把代码贴出来方便对照：

myspace.prototype.attached = function () { 
  var that = this; 
  this.appViewModel.dataLoaded.subscribe(function (val) { 
    window.setTimeout(function() { 
      that.showUI(val); 
    }, 300); 
  }, this); 
};

这里是每一部分的作用：

1. myspace.prototype.attached = function () {...}：给所有myspace实例添加一个叫attached的方法。以后任何myspace对象都能调用instance.attached()来执行这段逻辑。
2. var that = this;：这是JavaScript里的常见技巧——保存当前myspace实例的上下文。因为后面嵌套了多层函数，内部的this会指向别的对象（比如setTimeout里的this默认是window），用that就能在内部函数里精准访问到原来的myspace实例。
3. this.appViewModel.dataLoaded.subscribe(...)：开始监听appViewModel里的dataLoaded这个可观察值。只要dataLoaded的内容更新（比如数据加载完成了，值从false变成true，或者从空数组变成有数据的数组），后面的回调函数就会触发。
4. function (val) {...}：这是订阅的回调函数，val就是dataLoaded更新后的新值。比如原来dataLoaded是false，现在变成true，val就是true。
5. window.setTimeout(function() { that.showUI(val); }, 300);：延迟300毫秒后，调用当前myspace实例的showUI方法，并且把新的dataLoaded值传进去。加延迟通常是为了等待DOM渲染完成，或者确保数据完全加载好再显示UI，避免界面出现加载不全或者闪烁的问题。
6. 最后那个, this：是subscribe方法的第二个参数，用来指定回调函数里的this指向当前myspace实例。不过这里我们已经用that保存了上下文，这个参数其实有点冗余，但加上也不影响，算是双重保险。

这段代码的作用是：当myspace实例执行attached方法后，就会“盯”着appViewModel.dataLoaded的变化。一旦数据加载完成（或者这个值发生任何更新），就等300毫秒，然后调用实例的showUI方法，把新的数据状态传进去，最终目的应该是在数据准备好后，延迟显示对应的UI界面，提升用户体验。

内容的提问来源于stack exchange，提问作者Sarah