Vue2为何能通过this访问到data与methods的属性

    //创建vue的实例
    const vm = new Vue({
        data: {
            desc: '为什么this能够直接访问data中的属性',
        },
        methods: {
            sayName() {
                console.log(this.desc);
            }
        },
    });
    console.log(vm.name);
    console.log(vm.sayName());

 function Vue(options) {
        if (!(this instanceof Vue)
        ) {
            warn('Vue是一个构造函数，应使用“new”关键字调用');
        }
        this._init(options);
}
//Vue() //错误的调用方式 进入警告判断 此时this指向window 然后window的 window.__proto__的指向的Window构造函数的prototype

initMixin(Vue)
function initMixin(Vue) {
        //prototype上增加init方法
        Vue.prototype._init = function (options) {
            var vm = this; //Vue实例
          	vm.age = 30
          //代码进行了删减
            initState(vm);
        }
}
//这里只是举例测试
const vm = new Vue({})
console.log(vm.age) //30

 //initState方法代码进行了删减
    function initState(vm) {
        vm._watchers = [];
        var opts = vm.$options; //这里是我们在创建实例的时候传的参数
        //如果传了methods 则去调用
        if (opts.methods) { initMethods(vm, opts.methods); }
        if (opts.data) {
            initData(vm);
        } else {
            observe(vm._data = {}, true );
        }
    }

    function initMethods(vm, methods) {
        var props = vm.$options.props;
        //循环methods对象
        for (var key in methods) {
            {
                //判断是否是函数 不是的化则作出警告
                if (typeof methods[key] !== 'function') {
                    warn(
                        "Method "" + key + "" has type "" + (typeof methods[key]) + "" in the component definition. " +
                        "Did you reference the function correctly?",
                        vm
                    );
                }
                //判断 methods 中的每一项是不是和 props 冲突了，如果是，警告。
                if (props && hasOwn(props, key)) {
                    warn(
                        ("Method "" + key + "" has already been defined as a prop."),
                        vm
                    );
                }
                //判断 methods 中的每一项是不是已经在 new Vue实例 vm 上存在，而且是方法名是保留的 _ $ （在js中一般指内部变量标识）开头，如果是警告。
                if ((key in vm) && isReserved(key)) {
                    warn(
                        "Method "" + key + "" conflicts with an existing Vue instance method. " +
                        "Avoid defining component methods that start with _ or $."
                    );
                }
            }
            //给实例增加methods中的方法 这样其实我们就已经可以用vm访问 到methods中的方法了
            vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
        }
    }

  const vm = new Vue({
        methods: {
            sayHi() {
                console.log(this.age, 'hello-this')
            }
        }
    });
    let a = {
        age: 15,
        fn: vm.sayHi
    }
    console.log(a.fn(), 'vm') //打印15

 function initData(vm) {
        var data = vm.$options.data;
        data = vm._data = typeof data === 'function'
            ? getData(data, vm)
            : data || {};
        //如果不是对象则警告
        if (!isPlainObject(data)) {
            data = {};
            warn(
                'data functions should return an object:\n' +
                'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
                vm
            );
        }
        // proxy data on instance
        var keys = Object.keys(data);
        var props = vm.$options.props;
        var methods = vm.$options.methods;
        var i = keys.length;
        while (i--) {
            var key = keys[i];
            //判断key值有没有跟methods中的key重名
            {
                if (methods && hasOwn(methods, key)) {
                    warn(
                        ("Method "" + key + "" has already been defined as a data property."),
                        vm
                    );
                }
            }
            //判断key值有没有跟props中的key重名
            if (props && hasOwn(props, key)) {
                warn(
                    "The data property "" + key + "" is already declared as a prop. " +
                    "Use prop default value instead.",
                    vm
                );
                //是否是内部私有保留的字符串$ 和 _ 开头
            } else if (!isReserved(key)) {
              //代理
                proxy(vm, "_data", key);
            }
        }
        // observe data
        observe(data, true );
    }

  function proxy (target, sourceKey, key) {
      sharedPropertyDefinition.get = function proxyGetter () {
        return this[sourceKey][key]
      };
      sharedPropertyDefinition.set = function proxySetter (val) {
        this[sourceKey][key] = val;
      };
      Object.defineProperty(target, key, sharedPropertyDefinition);
  }

//创建vue构造函数
    function Vue(options) {
        if (!(this instanceof Vue)
        ) {
            warn('Vue是一个构造函数，应使用“new”关键字调用');
        }
        this._init(options);
    }
    //初始化
    initMixin(Vue);
    function initMixin(Vue) {
        //prototype上增加init方法
        Vue.prototype._init = function (options) {
            var vm = this; //Vue实例
            let methods = options.methods
            initState(vm);
        }
    }
    //initState方法代码进行了删减
    function initState(vm) {
        vm._watchers = [];
        var opts = vm.$options; //这里是我们在创建实例的时候传的参数
        //如果传了methods 则去调用
        if (opts.methods) { initMethods(vm, opts.methods); }
        if (opts.data) {
            initData(vm);
        } else {
            observe(vm._data = {}, true );
        }
    }
    
    function initMethods(vm, methods) {
        var props = vm.$options.props;
        //循环methods对象
        for (var key in methods) {
            {
                //一些条件判断
            }
            //给实例增加methods中的方法 这样其实我们就已经可以用vm访问 到methods中的方法了
            vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
        }
    }
    const vm = new Vue({
        methods: {
            sayHi() {
                console.log('hello-this')
            }
        }
    });
    vm.sayHi() //hello-this