目录

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

const vm = new Vue({
  data: {
    name: '我是pino',
  },
  methods: {
    print() {
      console.log(this.name);
    },
  },
});
console.log(vm.name); // 我是pino
vm.print(); // 我是pino

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

function Super(options) {}
const p = new Super({
  data: {
    name: 'pino',
  },
  methods: {
    print() {
      console.log(this.name);
    },
  },
});
console.log(p.name); // undefined
p.print(); // p.print is not a function

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

# 源码

首先可以找到 vue2 的入口文件： src/core/instance/index

function Vue(options) {
  if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}
// 初始化操作是在这个函数完成的
initMixin(Vue);
stateMixin(Vue);
eventsMixin(Vue);
lifecycleMixin(Vue);
renderMixin(Vue);
export default Vue;

接下来看 initMixin 文件中是如何实现的

export function initMixin(Vue: Class<Component>) {
  Vue.prototype._init = function(options?: Object) {
    const vm: Component = this;
    // a uid
    vm._uid = uid++;
    let startTag, endTag;
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`;
      endTag = `vue-perf-end:${vm._uid}`;
      mark(startTag);
    }
    // a flag to avoid this being observed
    vm._isVue = true;
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options);
    } else {
      vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor), options || {}, vm);
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm);
    } else {
      vm._renderProxy = vm;
    }
    // expose real self
    vm._self = vm;
    initLifecycle(vm);
    initEvents(vm);
    initRender(vm);
    callHook(vm, 'beforeCreate');
    initInjections(vm); // resolve injections before data/props
    // 初始化data/methods...
    initState(vm);
    initProvide(vm); // resolve provide after data/props
    callHook(vm, 'created');
  };
}

其实仅仅关注 initState 这个函数就好了，这个函数初始化了 props, methods, watch, computed

  • 使用 initProps 初始化了 props
  • 使用 initMethods 初始化了 methods
  • 使用 initData 初始化了 data
  • 使用 initComputed 初始化了 computed
  • 使用 initWatch 初始化了 watch
function initState(vm) {
  vm._watchers = [];
  var opts = vm.$options;
  // 判断props属性是否存在，初始化props
  if (opts.props) {
    initProps(vm, opts.props);
  }
  // 有传入 methods，初始化方法methods
  if (opts.methods) {
    initMethods(vm, opts.methods);
  }
  // 有传入 data，初始化 data
  if (opts.data) {
    initData(vm);
  } else {
    observe((vm._data = {}), true /* asRootData */);
  }
  // 初始化computed
  if (opts.computed) {
    initComputed(vm, opts.computed);
  }
  // 初始化watch
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch);
  }
}

在这里只关注 initMethods 和 initData

# initMethods

function initMethods(vm, methods) {
  var props = vm.$options.props;
  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);
      }
      // 判断props存在且props中是否有同名属性
      if (props && hasOwn(props, key)) {
        warn('Method "' + key + '" has already been defined as a prop.', 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中的每一项的this指向绑定至实例
    // bind的作用就是用于绑定指向，作用同js原生的bind
    vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
  }
}

其实整个 initMethods 方法核心就是将 this 绑定到了实例身上，因为 methods 里面都是函数，所以只需要遍历将所有的函数在调用的时候将 this 指向实例就可以实现通过 this 直接调用的效果。 其他的大部分代码都是用于一些边界条件的判断：

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

# bind 函数

function polyfillBind(fn, ctx) {
  function boundFn(a) {
    var l = arguments.length;
    // 判断参数的个数来分别使用call/apply进行调用
    return l ? (l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a)) : fn.call(ctx);
  }
  boundFn._length = fn.length;
  return boundFn;
}
function nativeBind(fn, ctx) {
  return fn.bind(ctx);
}
// 判断是否支持原生的bind方法
var bind = Function.prototype.bind ? nativeBind : polyfillBind;

bind 函数中主要是做了兼容性的处理，如果不支持原生的 bind 函数，则根据参数个数的不同分别使用 call/apply 来进行 this 的绑定，而 call/apply 最大的区别就是传入参数的不同，一个分别传入参数，另一个接受一个数组。

# hasOwn

用于判断是否为对象本身所拥有的对象，上文通过此函数来判断是否在 props 中存在相同的属性

// 只判断是否为本身拥有，不包含原型链查找
var hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
  return hasOwnProperty.call(obj, key);
}
hasOwn({}, 'toString'); // false
hasOwn({ name: 'pino' }, 'name'); // true

# isReserved

判断是否为内部私有命名（以$或_开头）

function isReserved(str) {
  var c = (str + '').charCodeAt(0);
  return c === 0x24 || c === 0x5f;
}
isReserved('_data'); // true
isReserved('data'); // false

# initData

function initData(vm) {
  var data = vm.$options.data;
  // 判断data是否为函数，如果是函数，在getData中执行函数
  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
  // 取值 props/methods/data的值
  var keys = Object.keys(data);
  var props = vm.$options.props;
  var methods = vm.$options.methods;
  var i = keys.length;
  // 判断是否为props/methods存在的属性
  while (i--) {
    var key = keys[i];
    {
      if (methods && hasOwn(methods, key)) {
        warn('Method "' + key + '" has already been defined as a data property.', vm);
      }
    }
    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 /* asRootData */);
}

# getData

如果 data 为函数时，调用此函数对 data 进行执行

function getData(data, vm) {
  // #7573 disable dep collection when invoking data getters
  pushTarget();
  try {
    // 将this绑定至实例
    return data.call(vm, vm);
  } catch (e) {
    handleError(e, vm, 'data()');
    return {};
  } finally {
    popTarget();
  }
}

# proxy

代理拦截，当使用 this.xxx 访问某个属性时，返回 this.data.xxx

// 一个纯净函数
function noop(a, b, c) {}
// 代理对象
var sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop,
};
function proxy(target, sourceKey, key) {
  // get拦截
  sharedPropertyDefinition.get = function proxyGetter() {
    return this[sourceKey][key];
  };
  // set拦截
  sharedPropertyDefinition.set = function proxySetter(val) {
    this[sourceKey][key] = val;
  };
  // 使用Object.defineProperty对对象进行拦截
  Object.defineProperty(target, key, sharedPropertyDefinition);
}

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

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

# 简略实现

function Person(options) {
  let vm = this;
  vm.$options = options;
  if (options.data) {
    initData(vm);
  }
  if (options.methods) {
    initMethods(vm, options.methods);
  }
}
function initData(vm) {
  let data = (vm._data = vm.$options.data);
  let keys = Object.keys(data);
  let len = keys.length;
  while (len--) {
    let key = keys[len];
    proxy(vm, '_data', key);
  }
}
var sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop,
};
function proxy(target, sourceKeys, key) {
  sharedPropertyDefinition.get = function() {
    return this[sourceKeys][key];
  };
  sharedPropertyDefinition.set = function(val) {
    this[sourceKeys][key] = val;
  };
  Object.defineProperty(target, key, sharedPropertyDefinition);
}
function noop(a, b, c) {}
function initMethods(vm, methods) {
  for (let key in methods) {
    vm[key] = typeof methods[key] === 'function' ? methods[key].bind(vm) : noop;
  }
}
let p1 = new Person({
  data: {
    name: 'pino',
    age: 18,
  },
  methods: {
    sayName() {
      console.log('I am' + this.name);
    },
  },
});
console.log(p1.name); // pino
p1.sayName(); // 'I am pino'

# 总结

所以就可以回答题目的问题了： 通过 this 直接访问到 methods 里面的函数的原因是：因为 methods 里的方法通过 bind 指定了 this 为 new Vue 的实例(vm)。 通过 this 直接访问到 data 里面的数据的原因是： data 里的属性最终会存储到 new Vue 的实例（vm）上的 _data 对象中，访问 this.xxx，是访问 Object.defineProperty 代理后的 this._data.xxx。

Vue2 this 详解 (opens new window)