在平时使用vue来开发项目的时候，对于下面这一段代码，我们可能每天都会见到：

但是自己实现一个构造函数却实现不了这种效果呢？

那么vue2中是怎么实现这种调用方式的呢？

其实主要是initState这个函数，这个函数初始化了props, methods, watch, computed

• 使用initProps初始化了props
• 使用initMethods初始化了methods
• 使用initData初始化了data
• 使用initComputed初始化了computed
• 使用initWatch初始化了watch

其实整个initMethods方法核心就是将this绑定到了实例身上，因为methods里面都是函数，所以只需要遍历将所有的函数在调用的时候将this指向实例就可以实现通过this直接调用的效果。

其他的大部分代码都是用于一些边界条件的判断：

• 如果不为函数 -> 报错
• props存在且props中是否有同名属性 -> 报错
• 实例中是否有同名属性，而且是方法名是保留的 -> 报错

其实对data的处理就是将data中的属性的key遍历绑定至实例vm上，然后使用Object.defineProperty进行拦截，将真实的数据操作都转发到this.data上。

Object.defineProperty对象属性

value：属性的默认值。 
writable：该属性是否可写。 
enumerable：该属性是否可被枚举。 
configurable：该属性是否可被删除。 
set()：该属性的更新操作所调用的函数。 
get()：获取属性值时所调用的函数。

简略实现效果

作者：pino
链接：https://juejin.cn/post/7112255428452417549
来源：稀土掘金