微信小程序中的值传递

在使用微信小程序的过程中，发现页面向组件中传值或是父子组件中传值并不值传递，本文通过代码实验旨在弄明白值在传递过程中发生的变化。

首先建立一个如下的数据测试类：

export class TestModel {
  public _data = 1;
  get data() {
    console.log('call get data');
    if (this._data === 1) {
      this._data = Math.random();
    }
    return this._data;
  }
}

然后在C层中使用如下测试语句：

    const model = new TestModel();
    const model1 = new TestModel();
    console.log(model.data);
    console.log(model1._data);
    this.setData({
      testModel:  model
    });
    console.log(model === this.data.testModel);

最终的运行结果如下：

结论：在调用setData方法时，对象的clone仅限于属性（猜没是用了object 转json然后json又转成了object），方法是不会被clone的。我猜这也是为什么微信小程序在组件传值时，类型仅支持Object但不支持Interface的原因。

而至于为什么会这样，官方是这么解释的：

既然是两个进程，那么在传値时便只能进行序列化与反序列化了，这时是值传递也就不足为奇了。

如果真是这样的话，相信如下的情况会报stack异常：

export class BarModel {
  public fooModel: FooModel;
}
export class FooModel {
  public barModel: BarModel;
}
  onLoad() {
    const barModel = new BarModel();
    const fooModel =  new FooModel();
    barModel.fooModel = fooModel;
    fooModel.barModel = barModel;
    this.setData({
      fooModel: fooModel
    });
  },

原因则是在序列化时发生了cycle循环。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net