小程序自定义组件的methods的调用

自定义组件的methods的调用

• 今天写了一个日历组件，只显示当月的日历。在methods中用了一些方法来this.setData({})，但是不知道怎么让组件在实例化的时候自动调用方法。

• 后来查到组件有一套生命周期

  • created 组件实例化，但节点树还未导入，因此这时不能用setData
  • attached 节点树完成，可以用setData渲染节点，但无法操作节点
  • ready(不是onReady) 组件布局完成，这时可以获取节点信息，也可以操作节点
  • moved 组件实例被移动到树的另一个位置
  • detached 组件实例从节点树中移除

• 一般来说，想让某些设置初始值的方法在组件实例化的时候自动执行，那就在相应的生命周期函数中执行就可以了。当组件经历生命周期，就会自动执行里面的方法。

• **问题来了：**初始化值的方法应该放在哪个生命周期函数当中呢？

  • 由于我使用的是计算得到值，再进行初始化赋值：this.setData({})，然后还要渲染到wxml页面上，所以这个方法涉及到了页面节点。也就是说要在页面的节点树导入后才能执行方法。

  • 所以参照生命周期函数的解释说明，将数据渲染到到页面节点上的方法，应该在attached中执行。

  • 找到了执行时间点，那就调用，如何调用呢？

    • 方式一：this.methods.xxx() 报错

      • 先在attached()看一下this此时是什么？看下里面有没有此js文件的methods，结果一看，this当中并没有methods。然后再看this的原型**_proto_**，发现methods中的方法都被定义在这。
      • 也就是说，使用this.methods.xxx() 的方式，会报错，找不到该方法

    • 方式二：this._proto_.xxx() 报错

      • 既然我们看到methods中定义的方法都被放在了原型当中，那么使用它原型里面的方法行不行呢？

        • 结果一：会提示：treeManager找不到，出现这样的情况，是因为在xxx()方法中使用了this.setData({})，由于this的指向和原型链的关系，会导致xxx()方法中的this不是指向本实例，所以会报错。
          

        • 结果二：正常运行：因为xxx()中没有涉及到修改原型链上的数据，所以可以正常运行。

    • 方式三：this.xxx() 正确

      • // 生命周期
          lifetimes: {
            attached() {
              this.xxx();
            }
          },
        

      • 我们在attched()中没有找到我们定义的方法，那么这样的方式是怎样可以执行到我们的方法的呢？

        • 这就是原型链，this是本实例，当前实例找不到的方法，可以向父级中寻找，直到Object.prototype = null，也就是原型链的最顶层
        • 那么this.xxx()和this._proto_.xxx()有什么区别呢？
          • 应该是使用xxx()方法的对象或者有无修改原型链上的内容（其实我也不知道）