小程序里的自定义组件（四）：组件的data与properties的默认值讨论

我们新建一个组件test作为测试，test组件的js代码为：

之前我们讲过，在properties里定义的是组件对外要开发的属性，在data里定义的是在组件里自己使用的私有的数据，对小程序组件基础不了解的，可以看我前面的文章，这是一个系列的 小程序里的自定义组件（一）：基本概念

现在，我们在组件的properties里定义一个index为Number类型，在data里定义一个year为Number类型，定一个month为String类型，然后我们在组件的生命周期函数attached里打印出properties和data两个对象，我们看看里面的值。

 

    我们看日志打印出来，发现两个奇怪的现象：1、对properties里index打印出来的默认值是0，而对data下面的year和month都打印出JavaScript两个内置函数，一个是String()、一个是Number()。2、不管我们打印的是this.properties还是打印this.data,他们的显示结果是一模一样的。其实我们在properties是没有定义year和month的，在data里，是没有定义index，为什么会这样呢？

    首先我们解释一下f String()和f Number()，看到f，其实我们就会想到函数，所以我们打印出Number或者String的类型：console.log(typeof (Number))，发现他们是function，那为什么在properties里index打印出是0，在data里year打印出来是一个函数呢？其实在小程序里，对properties里的数据做了处理，对data里的数据没做处理。

如上图：现在我们做个测试，我们给data里year设置了一个初始值0，给month设置了一个初始值“”，这样打印出日志，发现就正常了。

所以，得出一个结论：如果我们想对data里的数据做初始化，我们必须自己给他初始值。

现在我们解释一下现象2:不管我们打印的是this.properties还是打印this.data,他们的显示结果是一摸一样的。其实我们在properties是没有定义year和month的，在data里，是没有定义index，为什么会这样呢？

其实在小程序里，properties和data指向的是同一个js对象，换一种说法，我们可以理解为：小程序会把properties对象和data对象合并成一个对象，这样不管我们打印的是this.properties还是打印this.data,他们的显示结果是一摸一样的。

 

如上图，现在我们再做一个测试，现在我们在data里再定义一个index，把它初始值设为12，我们打印日志，发现index打印出来还是0.

所以我们得出一个结论：我们不要把data和properties里的变量设置成同一个名字，如果他们名字相同，properties里的会覆盖data里的。

欢迎阅读我的关于小程序组件的一系列文章

小程序进阶文集

https://www.jianshu.com/nb/34392740

https://www.jianshu.com/nb/34392740